如何在react-native中按下按钮打开网页视图？

qhhrdooz 于 2023-03-09 发布在 React

关注(0)|答案(2)|浏览(159)

我想在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
    }
});

react-native

来源：https://stackoverflow.com/questions/63795571/how-to-open-a-webview-on-button-press-in-react-native

2条答案

按热度按时间

fdbelqdn1#

您可以添加一个状态，像这样打开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>
    );
  }
}

赞(0）回复(0）举报 2023-03-09

pw9qyyiw2#

使用标记管理是否显示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>
    );
  }
}

赞(0）回复(0）举报 2023-03-09

我来回答

如何在react-native中按下按钮打开网页视图？

2条答案

相关问题

热门标签

最新问答