Передача состояния другому компоненту в React Native

Question

React Native Newbie здесь.

У меня есть (на мой взгляд) случай общего использования здесь.Я работаю с React Navigation и имею 4 разных вкладки.В первой вкладке у меня есть FlatList, из которого я хочу выбрать Избранное.Эти Избранное должны быть перечислены в другой вкладке.Пока ничего более.

Проблема, с которой я сталкиваюсь, заключается в том, что я не понимаю, как передать переменную избранного, объявленную в моем состоянии первой вкладки, в другую вкладку.Может быть, подход тоже совершенно неправильный ..

Первая вкладка / экран :

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, прочитав все остальные статьи, но экраны не имеют отношения Родитель / Дитя.

То, что я хочу сделать, будет во Второй вкладке что-то вроде

HomeScreen.state.favourites

Спасибо.

Answer 1

В вашем сценарии использования «глобального» состояния доступа находятся библиотеки управления состояниями. Один хороший пример - библиотека Redux - в этом случае вы можете сохранить избранное в части состояния под названием «HomeScreen», отобразить ее и использовать это на любом экране в остальной части приложения.

Вот хорошая статья о том, как начать работать с Redx: https://blog.cloudboost.io/getting-started-with-react-native-and-redux-6cd4addeb29

Answer 2

Ваш случай очень распространен. Я столкнулся с передачей «общего состояния» между приложением.

Компоненты имеют локальное состояние, которое вы можете передать дочерним компонентам через реквизиты (о которых вы упомянули).

Проблема возникает, когда вы хотите получить доступ к этому состоянию в другом компоненте. Решение здесь имеет глобальное состояние.

Возможно, вы захотите рассмотреть Redux для вашего приложения.

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

С веб-сайта редукса:

Redux - это контейнер с предсказуемым состоянием для приложений JavaScript.

Это помогает вам писать приложения, которые ведут себя согласованно, работают в различные среды (клиентская, серверная и собственная), и их легко тестовое задание. Вдобавок ко всему, он обеспечивает отличный опыт разработчика, такой как как редактирование живого кода в сочетании с отладчиком путешествий во времени.

По сути, вы получите глобальное состояние, к которому могут обращаться все компоненты вашего приложения. Это позволяет вам обновлять состояния в одном компоненте и получать к ним доступ в другом.

Я предупрежу вас, это не самая простая вещь для изучения. Когда вы впервые смотрите на это - это немного утомительно. Но по мере того, как ваше приложение усложняется и вы добавляете больше состояний, вы будете рады, что использовали его.

Хорошая новость заключается в том, что Redux хорошо документирован с помощью React и React Native - поэтому вы должны найти множество руководств по его интеграции в текущее приложение.