根据document.getelementbyid是否存在来设置状态

Question

所以我目前正在使用InjectJavascript来更改我的webview的html元素的值。我能够将这些值分配给我在我的状态中的值。我如何设置一些等于document.getElementById（＆＃39; data＆＃39;）。值的状态变量？似乎ReactNative和javascript代码彼此不兼容。

我试过if（document.getElementById（＆＃39; data＆＃39;）。value.length＆gt; 0）{$ {this.setState（{data：document.getElementById（＆＃39; data＆＃39） ;）。value}）}}，但它不起作用

const jsCode= `
  document.getElementById('username').value='${this.state.userName}';  
  document.getElementById('password').value='${this.state.userPassword}';
  document.getElementById('logIn').click();
`

<WebView
   style={styles.webView}
   source={{uri: 'http://example.com'}}
   javaScriptEnabled
   injectedJavaScript={jsCode}
   renderLoading={()=>{
     return(
       <ActivityIndicator style = {
          { position: 'absolute', left: 0, right: 0,
            top: 0, bottom: 0, alignItems: 'center',
            justifyContent: 'center'
          }
       }/>
     )}
   }>
 </WebView>

Answer 1

要将WebView组件中的某些数据传递给本机反应，您可以使用onMessage prop。

注意： postMessage与WebView有关。该示例注入了从an issue获取的代码来解决此问题。

  

<强>的onMessage

     

window.postMessage调用时调用的函数   postMessage。设置此属性将注入一个   WebView全球postMessage，但仍会致电   预先存在的值window.postMessage。

     

event.nativeEvent.data接受一个参数，即数据   在事件对象const jsCode = `function waitForBridge() { //the react native postMessage has only 1 parameter //while the default one has 2, so check the signature //of the function if (window.postMessage.length !== 1){ setTimeout(waitForBridge, 200); } else { window.postMessage('abc'); // postMessage expects a string } } window.onload = waitForBridge;` //... <WebView style={styles.webView} source={{uri: 'http://example.com'}} javaScriptEnabled injectedJavaScript={jsCode} onMessage={(event) => console.log('Posted Message: ', event.nativeEvent.data)} renderLoading={()=>{ return( <ActivityIndicator style = { { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' } }/> )} }> </WebView> 上可用。 数据必须   是一个字符串。

示例

<activity
android:name="com.example.android.GizmosActivity"
android:label="@string/title_gizmos" >
<intent-filter android:label="@string/filter_view_http_gizmos">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- Accepts URIs that begin with "http://www.example.com/gizmos” -->
    <data android:scheme="http"
          android:host="www.example.com"
          android:pathPrefix="/gizmos" />
    <!-- note that the leading "/" is required for pathPrefix-->
</intent-filter>
<intent-filter android:label="@string/filter_view_example_gizmos">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- Accepts URIs that begin with "example://gizmos” -->
    <data android:scheme="example"
          android:host="gizmos" />
</intent-filter>
</activity>