[React Native]ページで状態の変更をどのように調整できますか？

Question

React Native画面に数多くの「ページ」があることを望みます。 ユースケースは、ワークフローまたはフローチャートです。各ページから複数の場所にあなたを送ることができます。

私は最終的なものを柔軟にして、10ページ程度の.jsページを書いて一緒にリンクさせたくありません。

私の狡猾な計画は、Reactが提供する「状態」のものに状態オブジェクトを配置することでした。このオブジェクトを更新する方法については、今私は困惑しています。

これは私の現在のコードです。 renderifは、渡された場合、次のレイアウトを隠す魔法です。false

現在の動作は「ページ1」のみを示しています。ボタンを押すと空白の画面が表示されます。

基本的なjavascriptエラーは何ですか？どのように私は自分自身のためにこれを複雑化してしまったのでしょうか？

import React, {Component} from "react"; 
import {StyleSheet, Text, View, ScrollView, Image, Button} from "react-native"; 
import {Font, AppLoading, WebBrowser} from "expo"; 
import {Actions} from "react-native-router-flux"; 
import styles from "./Styles"; 
import renderif from "./RenderIf"; 

class pageToShow { 
    constructor() { 
    this.GoToPageOne(); 
    } 
    GoToPageOne() { 
    this.pageOne = true; 
    this.pageTwo = false; 
    return this; 
    } 
    GoToPageTwo() { 
    this.pageOne = false; 
    this.pageTwo = true; 
    return this; 
    } 
} 
export default class FlipBook extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {show: new pageToShow()}; 
    } 
    render() { 
    return (
     <View> 
     {renderif(this.state.show.pageOne)(
      <ScrollView style={styles.background}> 

      <Text style={styles.header}> 
       <Text>{"Page one"}</Text> 
      </Text> 
      <Text style={styles.normal}> 
       This is page one 
      </Text> 
      <Button 
       title="This is a button to two" 
       onPress={() => this.setState({show: this.state.show.GoToPageTwo})} 
      /> 
      </ScrollView> 
     )} 
     {renderif(this.state.show.pageTwo)(
      <ScrollView style={styles.background}> 
      <Text style={styles.header}> 
       <Text>{"Page two"}</Text> 
      </Text> 
      <Text style={styles.normal}> 
       This is page two 
      </Text> 
      <Button 
       title="This is a button to one" 
       onPress={() => this.setState({show: this.state.show.GoToPageOne})} 
      /> 
      </ScrollView> 
     )} 
     </View> 
    ); 
    } 
} 

Answer 1

私はあなたがこのようなやり方をもっと複雑にしていると思います。 1つはナビゲーションライブラリを使用してページ間を移動できますが、すべてを状態で処理する場合は、このようなことを行うことができます。 *また、条件付きレンダリングを処理するのに 'case'を使用することもできます。

export default class FlipBook extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {show: 'pageOne' }; 
    } 
    render() { 
    return (
     <View> 
     {this.state.show === 'pageOne' ? (
      <ScrollView style={styles.background}> 
      <Text style={styles.header}> 
       <Text>{"Page one"}</Text> 
      </Text> 
      <Text style={styles.normal}> 
       This is page one 
      </Text> 
      <Button 
       title="This is a button to two" 
       onPress={() => this.setState({show: 'pageTwo' })} 
      /> 
      </ScrollView> 
     ) : null} 
     {this.state.show === 'pageTwo' ? (
      <ScrollView style={styles.background}> 
      <Text style={styles.header}> 
       <Text>{"Page two"}</Text> 
      </Text> 
      <Text style={styles.normal}> 
       This is page two 
      </Text> 
      <Button 
       title="This is a button to one" 
       onPress={() => this.setState({show: 'pageOne' })} 
      /> 
      </ScrollView> 
     ) : null} 
     </View> 
    ); 
    } 
}