webviewで動的HTML文字列を読み込む方法

Question

非同期Webサービスリクエストが終了したら、動的HTML文字列をwebviewにロードします。これどうやってするの？

<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のレンダリングを遅らせる：this.state.commonHtmlで一部のコンテンツがある場合にのみ

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が原因行うことができます。