如何在webview中加載動態html字符串

Question

我想在異步Web服務請求完成時在webview中加載動態html字符串。我怎樣才能做到這一點？

<WebView source={{html: dynamichtml}}/> 

getMoviesFromApiAsync() 
{ 
    return fetch('*****some url*****') 
    .then((response) => response.json()) 
    .then((responseJson) => { 
    this.setState({isLoading: false, jsonData: responseJson}); 
    this.getDataFromServer(responseJson); 
    return responseJson; 
    }) 
    .catch((error) => { 
    console.error(error); 
    }); 

}

getDataFromServer(responseJson) 
{ 
    var a ='ravi'; 
    var b = 'chennai'; 
    var commonHtml = `my name is ${a} from ${b}`; 
    <WebView source={{html: commonHtml}}/> // not working 
} 

Answer 1

可以完成，通過例如延緩WebView渲染，直到請求完成：

constructor(props) { 
    super(props); 

    this.state = { 
    commonHtml = '' 
    }; 
} 

componentDidMount() { 
    getMoviesFromApiAsync(); 
} 

getMoviesFromApiAsync() { 
    fetch('*****some url*****') 
    .then((response) => response.json()) 
    .then((responseJson) => { 
    // Assuming responseJson.data.nameA and responseJson.data.nameB exist 
    const { nameA, nameB } = responseJson.data; 
    this.setState({commonHtml: `my name is ${nameA} from ${nameB}`}); 
    }) 
    .catch((error) => { 
    console.error(error); 
    }); 
} 

render() { 
    const commonHtml = { this.state }; 

    return (
    <View> 
     {commonHtml ? 
     <WebView style={{width: 200, height: 200}} source={{html: commonHtml}} /> : 
     (
      <View> 
      <Text>Loading</Text> 
      </View> 
     ) 
     } 
    </View> 
); 
} 

這個例子呈現WebView只有當在this.state.commonHtml一些內容。

事實上，如果你不想做任何奇特的事情，甚至不需要三元組。你可以簡單地做

render() { 
    return (
    <WebView style={{width: 200, height: 200}} source={{html: this.state.commonHtml}} /> 
); 
} 

和setState導致重新繪製時this.state.commonHtml變化。