ios - Shoutem 将 Prop 传递到另一个屏幕

Question

我已经成功将 Prop 传递到另一个屏幕，但是如何在第二个屏幕上全局使用 Prop ？

我需要能够在包括 render() 在内的所有函数中使用从屏幕 1 传递的 props，因为我正在使用来自 props 的数据进行提取调用并使用与我相同的 props 数据render() 调用。

例如，我需要这样做:

constructor(props) {
    super(props);
    this.state = {
      data: [],
      rowData: this.props,
    }
  }

  getData() {
    this.setState({
      rowData: this.props
    });
    return fetch('https://mywebsite.com/'+this.state.rowData.something+'/myotherdata')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          data: responseJson.data
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  componentDidMount() {
    this.getData();
  }

  render() {      

    return (
      <ScrollView>
        <Image styleName="large-banner" source={{ uri: rowData.image &&
        rowData.image ? rowData.image : undefined }}>
          <Tile>
            <Title>{rowData.name}</Title>
            <Subtitle>{rowData.createdAt.datetime}</Subtitle>
          </Tile>
        </Image>

        <Row>
          <Text>Company: {rowData.company}</Text>
        </Row>

        <Divider styleName="line" />

        <Row>
          <Icon name="laptop" />
          <View styleName="vertical">
            <Subtitle>Visit webpage</Subtitle>
            <Text>{rowData.url}</Text>
          </View>
          <Icon name="right-arrow" />
        </Row>

        <Divider styleName="line" />

        <View style={{paddingTop: 20}}>
          <Progress.Bar progress={this.state.data.progress * .1} width={200} />
        </View>

        <Divider styleName="line" />

      </ScrollView>
    );
  }

显然，我做的事情不对，但我想不通。我做错了什么？

这question详细解释我的屏幕和 fetch 调用。

编辑:我根据下面的答案进行了更改并更新了我的代码。屏幕加载然后出现此错误:

undefined 不是一个对象(评估'this.state.data.progress)

对于这一行:

<Progress.Bar progress={this.state.data.progress * .1} width={200} />

Answer 1

据我所知，您有 2 个选择:

1) 当你第一次收到 Prop 时，你可以将它们存储在你的组件状态中，然后你可以通过调用 this.state 在当前组件的任何地方引用它们

2) 您可以使用 Redux 将所有数据存储在 Reducer 中，然后它们将在您在 mapStateToProps 中实例化并连接的每个组件中可用。

选择哪一个，要看你需要遵循这个架构多少次，需要多少组件。

你可以在他们的官方文档中获得更多关于 Redux 的信息。这是他们提供的一个简单示例:http://redux.js.org/docs/basics/ExampleTodoList.html

希望对您有所帮助。