如何在我的React Native頁面中編排狀態更改？

Question

我希望在React Native屏幕上有多個（比如10個）不同的'頁面'。 用例是工作流或流程圖。每個頁面可以將您發送到多個不同的地方。

我希望最終的東西足夠靈活，我不想簡單地寫出10個左右的.js頁面並將它們鏈接在一起。

我的狡猾計劃是將一個狀態對象放入React提供的'狀態'事物中，我現在難以知道如何更新這個對象。

這是我現在的代碼。 renderif有點神奇，如果它通過，隱藏以下佈局false

當前的行爲是它只顯示'第一頁'。當我按下按鈕時，我看到一個空白屏幕。

我在做什麼基本的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

嗯，我認爲你讓這種方式比它應該更復雜。對於一個你可以使用導航庫在頁面之間導航，但是如果你希望一切都按照狀態來處理，你可以做這樣的事情。 *也可以使用'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> 
    ); 
    } 
}