Flex WebView in reactネイティブ

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

あなたのアプローチにはいくつかの問題があります。最初に、ボタンがそこに存在しないことをいつまで期待していますか？ 2つの要素を持つ静的フレックスボックスレイアウトを設定しました。つまり、両方がスクリーンの半分を占めることになります。

ウェブビューが最後に来たときにそれを検出してからボタンを表示するには、いくつかのjavascriptをウェブビューに挿入する必要があります。 React Native v0.37では、onMessage機能が追加され、情報をコンポーネントにポストバックすることができます。その時点でボタンを表示できます。私はあなたのwebview上に表示されるようにボタンを絶対的な位置にしました。

// 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を前提としています。リファクタリングだけでなく、バ​​ニラジャバスクリプトに注入された場合