如何在 react-native 的 Webview 底部显示一个按钮？答案

【问题标题】：How to display a button at the bottom of a Webview in react-native?如何在 react-native 的 Webview 底部显示一个按钮？
【发布时间】：2021-07-14 03:07:20
【问题描述】：

在我的组件 (PrivacyPolicy.js) 中，我有一个页眉视图、一个 web 视图和一个页脚视图。 webview，根据大小，可以滚动。我的问题是页脚视图显示在屏幕底部，就像它的样式是“位置：'绝对'”一样，所以它在滚动时保持显示。在显示所有 webview 后我需要它。

<View style={styles.main_container}>
  <View style={styles.header_container}>
    ...
  </View>
  <WebView originWhitelist={['*']} source={{ html: privacyPolicyContent }}/>
  <View style={styles.footer_container}>
    <CheckBox
      disabled={false}
      value={this.state.isChecked}
      onValueChange={(newValue) => this.setState({
         isChecked: newValue
      })}
      style={styles.checkbox}
      tintColors={{ true: '#157dfa' }}
    />
    <Text style={styles.checkbox_text}>I have read and accept the Privacy Polic</Text>
  </View>
</View>

我的风格：

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    paddingHorizontal:'5%'
  },
  header_container: {
    height: scale(90),
    flexDirection: 'row',
    marginLeft: 10
  },
  checkbox_container: {
    flexDirection: 'row'
  },
  checkbox: {
    marginLeft: -5,
  },
  checkbox_text: {
    marginTop: 8,
    fontSize: 10
  }
})

【问题讨论】：

标签： react-native webview react-native-webview

【解决方案1】：

我可以看到一些建议：

由于您的按钮是 React Native 按钮 =>您可以根据 scrollY 位置显示/隐藏。为此，您需要通过 Bridge 进行通信以相应地调度事件。

作为替代解决方案 =>您可以在 Webview 上创建按钮，使其具有相同的功能。

【讨论】：