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