React Native此处为新手。
我有一个(在我看来)常见的用例。我使用React Navigation，有4个不同的选项卡。在第一个选项卡中，我有一个平面列表，我想从中选择收藏夹。这些收藏夹应该会列在另一个选项卡中。到目前为止没有其他内容。
我遇到的问题是，我不知道如何将在第一个选项卡的状态中声明的收藏夹变量传输到另一个选项卡。也许这种方法也完全错误。。
第一个选项卡/屏幕：
import React, {Component} from 'react';
import { FlatList, Text, View, ScrollView, Image, TouchableHighlight} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
export default class HomeScreen extends Component {
state = {
data: [],
favourites: []
};
//Function called on the click of the Heart Button, adding the List Element to the State
addFav = item => {
this.setState((prevState) => ({'favourites': prevState.favourites+item.title+' '}))
alert(item.title)
}
componentWillMount() {
this.fetchData();
}
//Fetching the data from the API
fetchData = async () => {
const response = await fetch("http://192.168.1.19:8080/v1/api/event");
const json = await response.json();
this.setState({ data: json});
};
render() {
return <FlatList
ItemSeparatorComponent={() =>
<View
style={{ height: 1, width: '100%', backgroundColor: 'lightgray' }}
/>
}
data={this.state.data}
keyExtractor={(item => item.title)}
renderItem={({ item }) =>
<ScrollView>
<Image style={{alignSelf:'stretch', width:undefined, height:undefined, flex : 1, borderRadius:10}} source = {require('../img/landscape.jpeg')}/>
<TouchableHighlight onPress={()=>this.openEvent(item)}>
<View style={{flex: 1, flexDirection:'row', padding: 5}}>
<View style={{flex: 1}}>
<Text style={{fontSize:15, textAlign:'center', padding: 2}}>{this.timeConverterMonth(item.time)}</Text>
<Text style={{fontSize:15, textAlign:'center', padding: 2}}>{this.timeConverterDay(item.time)}</Text>
</View>
<View style={{flex: 4}}>
<Text style={{fontSize:15, padding: 2}}>{item.title}</Text>
<Text style={{fontSize:10, padding: 2}}>{item.locShort}</Text>
</View>
//That's where the function is called
<TouchableHighlight
style={{flex: 2}}
onPress={() => this.addFav(item)}
>
<Icon name="ios-heart-empty" size={24} style={{alignSelf: 'center', padding: 10}}/>
</TouchableHighlight>
</View>
</TouchableHighlight>
//just checking the state
<Text>{this.state.favourites}</Text>
</ScrollView>}
/>;
}
}
第二个选项卡/屏幕：
import React, {Component} from 'react';
import {Text} from 'react-native';
export default class FavouritesScreen extends Component {
constructor(props){
super(props)
}
render(){
//Here I want to display my favourites Array from the HomeScreen State
return <Text>{this.props.favourites}</Text>;
}
}
事实上，我并不想知道为什么它不起作用，我只是通过阅读所有其他文章来尝试道具方法，但屏幕不属于父母/孩子关系。
所以我想在第二个选项卡中做一些类似的事情
HomeScreen.state.favourites
谢谢。
您的案例非常常见。我面临的一个问题是在应用程序之间传递"共享状态"。
组件有一个本地状态，您可以通过props(您已经提到过)将其传递给子组件。
当您想在另一个组件中访问该状态时，就会出现问题。这里的解决方案是建立一个全球状态。
您可能需要为您的应用程序考虑Redux。
https://redux.js.org/introduction/getting-started
来自redux网站：
Redux是JavaScript应用程序的可预测状态容器。
它可以帮助您编写行为一致、运行在不同的环境(客户端、服务器和本机)，并且易于测验除此之外，它还提供了出色的开发人员体验，例如作为实时代码编辑与时间旅行调试器相结合。
从本质上讲，您将获得一个全局状态，所有应用程序组件都可以访问该状态。这允许您更新一个组件内的状态，并在另一个组件中访问它们。
我要警告你，这不是最容易学的东西。当你第一次看到它时，它有点令人生畏。但是，随着应用程序的复杂性增加，添加了更多的状态，您会很高兴使用它
好消息是，Redux在React和React Native中有很好的文档记录，所以你应该找到很多关于如何将其集成到当前应用程序中的教程。
您使用"全局"访问状态的用例就是状态管理库的用武之地。一个很好的例子是libary Redux-在这种情况下，您可以将收藏夹存储在一个名为"HomeScreen"的状态下，并将其映射并在应用程序其余部分的任何屏幕中使用。
以下是一篇关于redux入门的好文章：https://blog.cloudboost.io/getting-started-with-react-native-and-redux-6cd4addeb29