如何在我的 React Native 页面中编排状态更改？

Question

我希望在 React Native 屏幕上有一个不同的数字（比如 10）'pages'。用例是工作流或流程图。每个页面都可以将您带到多个不同的地方。

我希望最后的事情足够灵活，以至于我不想简单地编写 10 个左右的 .js 页面并将它们 link 放在一起。

我的巧妙计划是在 React 提供的 'state' 中放置一个状态对象，我现在对如何更新这个对象感到困惑。

这是我当前的代码。 renderif有点神奇，如果通过false

隐藏下面的布局

当前行为仅显示 'page one'。当我按下按钮时，我看到一个空白屏幕。

我犯了哪些基本的 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>
    );
  }
}

如何在我的 React Native 页面中编排状态更改？

How can I orchestrate state change in my React Native page?

javascript

state

react-native