Question

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

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

我的狡猾计划是将一个状态对象放在React提供的'state'中，我现在很难知道如何更新这个对象。

这是我目前的代码。如果传递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>
    );
  }
}

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

1 个答案: