#react-native
#react-native
Вопрос:
Я хочу открыть webview в приложении react-native при нажатии кнопки.
Я новичок в react native и получаю ошибку, которую трудно понять.
const url = 'https://google.com/';
export default class MyWebComponent extends Component {
renderIcon(){
console.log("came here")
return(
return <WebView source={{ uri: url }} />;
)
}
render() {
return (
<View style={styles.container}>
<Button
onPress={{} => () this._renderIcon()}
title= {this.state.Title}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#EF5350'
},
instructions: {
textAlign: 'center',
color: '#ffffff',
marginBottom: 5
}
});
Ответ №1:
Вы могли бы добавить состояние, которое открывает webview следующим образом.
export default class MyWebComponent extends Component {
state = { shouldOpenWebview: false }
render() {
if (this.state.shouldOpenWebview) return <WebView source={{ uri: url }} />
return (
<View style={styles.container}>
<Button
onPress={() => this.setState({ shouldOpenWebview: true})}
title= {this.state.Title}
/>
</View>
);
}
}
Ответ №2:
Используйте флаг для управления, отображается Webview или нет.
Пример:
export default class ScreenTest extends Component {
state = { showWebview: false };
render() {
const { showWebview } = this.state;
return (
<View style={{ flex: 1 }}>
{showWebview ? (
<WebView style={{ flex: 1 }} source={{ uri }} />
) : (
<TouchableOpacity
onPress={() => this.setState({ showWebview: true })}
>
<Text>Show Webview!</Text>
</TouchableOpacity>
)}
</View>
);
}
}