Quiero obtener la entrada del usuario de un campo de entrada en la vista web y luego usarla en reaccionar nativo para cambiar el valor de "respuesta".
Dentro de la vista web, creé un campo de entrada con el id="data_1". Obtengo los datos de entrada a través de "oninput" y los guardo en "respuesta". Pero no puedo "responder" en reaccionar nativo usando window.ReactNativeWebView.postMessage (respuesta);
¿Algunas ideas?
Este es mi código:
import { Button, StyleSheet, Text, View, TouchableOpacity } from "react-native"; import { WebView } from "react-native-webview"; class MySweetComponent extends Component { render() { const run = ` document.body.style.backgroundColor = 'blue'; true;` let answer = "I want to change after user Input" setTimeout(() => { this.webref.injectJavaScript(run); }, 1000); return ( <View style={{ width: 350, height: 200 }}> <WebView scalesPageToFit={false} ref={(r) => (this.webref = r)} androidHardwareAccelerationDisabled={true} // To prevent crash when opening screen onMessage={(event) => { event.nativeEvent.data; }} source={{ html: ` <html> </pre> <input type="text" placeholder="Enter text" id="data_1" oninput="getValue()"> <script> function getValue() { let answer = document.getElementById("data_1").value; } window.ReactNativeWebView.postMessage(answer); true; </script> </body> </html> `, }} /> <Text>{answer}</Text> </View> ); } } export default MySweetComponent;ok, creo que somos muchas cosas, hagámoslo paso a paso
import { useState } from 'react'; import { Button, StyleSheet, Text, View, TouchableOpacity } from "react-native"; import { WebView } from "react-native-webview"; const html = ` <html> <head></head> <body> <input id="myId" placeholder="Enter text" oninput="getValue()"> <script> window.id = setInterval(() => { if (window.ReactNativeWebView) { document.body.style.backgroundColor = 'green'; clearInterval(window.id); } }, 1000); function getValue() { let answer = document.getElementById("myId").value; window.ReactNativeWebView.postMessage(answer); }; </script> </body> </html> `; const MySweetComponent = () => { const [answer, setAnswer] = useState("I want to change after user Input"); return ( <View style={{ width: 350, height: 200 }}> <WebView onMessage={(event) => { console.log("EVENT-DATA:", event); setAnswer(event.nativeEvent.data); }} source={{html}} /> <Text>{answer}</Text> </View> ); }; export default MySweetComponent;Creo que tienes un error de html con la etiqueta pre
</pre> simplemente elimine eso y coloque todo su <script/> antes del html para poder llamarlo entonces.
Y tal vez solo desee el valor una vez que el usuario termine de escribir. Usaría onblur en lugar de oninput para evitar enviar un mensaje por cada tecla presionada, pero ambas formas deberían funcionar