Shoutem将道具传递到另一个屏幕

时间:2017-09-09 14:04:55

标签: ios react-native shoutem

我已成功将道具传递到另一个屏幕,但如何在第二个屏幕上全局使用道具?

我需要能够在包括render()在内的所有函数中使用从屏幕1传递的道具,因为我正在使用来自道具的数据进行获取调用并使用相同的道具数据{{1}打电话。

例如,我需要这样做:

render()

显然,我没有做对,但我无法理解。我做错了什么?

question详细说明了我的屏幕和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> ); } 来电。

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

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

这一行:

fetch

1 个答案:

答案 0 :(得分:2)

据我所知,你有两个选择:

1)当您第一次收到道具时,您可以将它们存储在组件状态中,然后您可以通过调用this.state将它们引用到当前组件中的任何位置

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

选择哪一个,取决于您需要遵循此体系结构的次数和数量。

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

希望它有所帮助。