Блог

Я хочу открыть 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
    }
});
  

Вы могли бы добавить состояние, которое открывает 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>
    );
  }
}

  

Используйте флаг для управления, отображается 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>
    );
  }
}