如何在React Native页面中安排状态更改？

Question

I wish to have a number (say 10) different 'pages' on a React Native screen. The use case is a workflow or flowchart. Each page can send you to multiple different places.

I want the final thing to be flexible enough that I don't want to simply write the 10 or so .js pages and link them together.

My cunning plan was to put a state object in the 'state' thing that React provides, I am now stumped as to how to update this object.

This is my current code. renderif is a bit of magic that hides the following layout if it is passed false

The current behaviour is it shows 'page one' only. when I press the button I see a blank screen.

What basic javascript errors am I making? and how have I over complexified this for myself :)

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

Hmm i think you're making this way more complicated than it should be. For one you can use a navigation library to navigate between the pages, but if you want everything to be handled by state you could do something like this. *Also you could use 'case' to handle conditional rendering too:

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>
    );
  }
}