反应原生的 Flex WebView答案

【问题标题】：Flex WebView in react native反应原生的 Flex WebView
【发布时间】：2016-12-22 23:20:19
【问题描述】：

在用户完全向下滚动 web 视图之前，我不希望“我同意”按钮可见。右“我同意”按钮始终显示在底部，并且 webview 具有固定宽度和滚动。

const styles = StyleSheet.create({
  container: {
    paddingTop: 0,
    padding: 5,
    flex: 1,
  },
});

export default class PrivacyPage extends Component {
  render() {
    return (
      <Container style={styles.container}>
        <WebView
          source={{uri: 'https://testabcdef.com/privacy.html'}}
          style={{marginTop: 20, flex: 1}}
        />
        <Button>
          <Text>
            I agree
          </Text>
        </Button>
    </Container>
    );
  }
}

【问题讨论】：

标签： css reactjs webview react-native

【解决方案1】：

你的搭档有一些问题。首先，您如何期望按钮不存在？您已经设置了一个包含两个元素的静态 flexbox 布局，这意味着它们都将占据屏幕的一半。

您需要在 webview 中注入一些 javascript 以检测 web view 何时结束，然后才显示按钮。 React Native v0.37 添加了 onMessage 功能，允许您将信息发布回组件。此时，您可以显示您的按钮。我已将按钮设置为绝对位置，以便它显示在您的 web 视图上。

// Inject JavaScript to detect scroll to end
const injectedJS = 
`
 $(window).scroll(function() {
     if($(window).scrollTop() + $(window).height() == $(document).height()) {
         postMessage("Scroled to bottom")
     }
  });

  if($(window).scrollTop() + $(window).height() == $(document).height()) {
    postMessage("Loaded on the bottom")
  }
`
export default class PrivacyPage extends Component {

  // Inject JavaScript to detect scroll to end
  state = {
    scrollEnd: false
  }

  _onMessage = () {
    this.setState({scrollEnd: true})
  }

  render() {
    return (
      <Container style={styles.container}>
        <WebView
          source={{uri: 'https://testabcdef.com/privacy.html'}}
          style={{marginTop: 20, flex: 1}}
          injectedJavascript={injectedJS}
          onMessage={this._onMessage}
        />
        {
          this.state.scrollEnd && 
            <Button style={styles.button}>
              <Text>
                I agree
              </Text>
            </Button>
        }

    </Container>
    );
  }
}

这个解决方案有点复杂，我建议进行一些跨浏览器测试。还假定您正在加载的页面上的 jQuery。如果不只是将 injectJS 重构为 vanilla javascript

【讨论】：

感谢您的回复。