Question

在此处反应本地新手。

我在这里有一个（我认为）通用的用例。我使用React Navigation并有4个不同的选项卡。在第一个选项卡中，我有一个FlatList，我想从中选择Favourites。然后，这些收藏夹应在另一个选项卡中列出。到目前为止，什么都没有。

我遇到的问题是我没有弄清楚如何将在第一个选项卡的状态下声明的收藏夹变量传输到另一个选项卡。也许这种方法也是完全错误的。

第一个标签页/屏幕：

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>;
  }
}

我实际上并不奇怪为什么它不起作用，我只是通过阅读所有其他文章尝试了props方法，但是Screens不在Parent / Child关系中。

所以我想做的就是在第二个标签中

HomeScreen.state.favourites

谢谢。

Answer 1

您的情况很常见。我遇到的一个问题是在应用程序之间传递“共享状态”。

组件具有局部状态，您可以通过props（已提到）将其传递给子组件。

当您要访问另一个组件中的状态时，会出现问题。这里的解决方案是具有全局状态。

您可能要考虑将Redux用于您的应用程序。

https://redux.js.org/introduction/getting-started

在redux网站上：

Redux是JavaScript应用程序的可预测状态容器。

它可以帮助您编写性能一致，运行于   不同的环境（客户端，服务器和本机），并且易于   测试。最重要的是，它提供了出色的开发人员体验，例如   作为实时代码编辑与时间旅行调试器的结合。

本质上，您将获得一个全局状态，可以由您的所有应用程序组件访问。这使您可以更新一个组件中的状态，并在另一个组件中访问它们。

我会警告您，这不是最容易学习的事情。当您初看它时-有点令人生畏。但是，随着应用程序复杂性的增加和状态的增加，您会很高兴使用它的。

好消息是，React和React Native很好地记录了Redux-因此，您应该找到很多有关如何将其集成到当前应用程序中的教程。

Answer 2

您拥有“全局”访问状态的用例就是状态管理库的所在。一个很好的例子是库Redux-在这种情况下，您可以将收藏夹存储在名为“ HomeScreen”的状态下，并将其映射并使用它可以在应用程序其余部分的任何屏幕上显示。

这是一篇有关redux入门的好文章：https://blog.cloudboost.io/getting-started-with-react-native-and-redux-6cd4addeb29

将状态传递给React Native中的另一个组件

2 个答案: