Flex WebView反應本機

Question

我不希望「我同意」按鈕是可見的，直到用戶完全向下滾動webview。右邊的「我同意」按鈕總是顯示在底部，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> 
    ); 
    } 
} 

Answer 1

您的方法伴侶存在一些問題。首先，你如何期待按鈕不在那裏？您已經設置了兩個元素的靜態flexbox佈局，這意味着它們都將佔用一半的屏幕。

您需要在Web視圖中注入一些JavaScript以檢測Web視圖何時結束並僅顯示按鈕。 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。如果不只是重構注入JS到香草javascript