如何在我的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> 
    ); 
    } 
}