Redux - запуск функций между дочерними компонентами - PullRequest
Новая
       14

Redux - запуск функций между дочерними компонентами

0 голосов
/ 14 февраля 2019

сообщество!Я использую React Native и реагировать на навигацию для этого проекта.При выполнении одного из экранов я понял, что у меня проблема, я не знаю, как вызвать функцию на главном экране, нажав на кнопку в его заголовке.В моем случае, у меня есть кнопка «читать все», которая меняет цвет всех непрочитанных уведомлений.

Первое, что я думаю, - это использовать каким-либо образом избыточный код для повторного вызова функции извлечения в теле экрана.

Ниже приведен мой действительный код навигатора и экрана.

Навигатор 

export const NotificationStack = createStackNavigator(
  {
    Notification: {
      screen: Notifications,
      navigationOptions: ({ navigation }) => ({
        headerLayoutPreset: "center",
        headerTransparent: false,
        headerLeft: null,
        headerRight: null,

        headerTitle: (
          <Header
            title="Notifications"
            hasChildren
            isLeftChild={
              <BackButton
                navigation={navigation}
                needCommentInputClean={false}
              />
            }
            isRightChild={<NotificationsReadAll />}
          />
        ),
        headerStyle: {
          height: 50,
          elevation: 1.5,
          shadowOpacity: 0.5,
          backgroundColor: "#f7f7f8"
        }
      })
    }
  },
  {
    cardStyle: {
      backgroundColor: "#fff",
      opacity: 1
    }
  }
);

Экран: 

class Notifications extends React.Component {
  state = {
    activityLimit: 0,
    loading: false,
    activities: []
  };

  componentDidMount() {
    this.loadActivities();
  }

  loadActivities = () => {
    const { loading, activities, activityLimit } = this.state;

    if (loading) return;
    if (activities.length < activityLimit && !newActivity) return;

    this.setState({ loading: true });

    getLatestActivity(activityLimit)
      .then(result => {
        this.setState({
          activities: result,
          activityLimit: activityLimit + 10,
          loading: false
        });
      })
      .catch(() => {
        this.setState({ loading: false });
      });
  };

  render() {
    const { activities, activityLimit, loading } = this.state;
    const { navigation } = this.props;

    return (
      <View>
        <NotificationsList
          loading={loading}
          activities={activities}
          activityLimit={activityLimit}
          loadActivities={this.loadActivities}
          navigation={navigation}
        />
      </View>
    );
  }
}
...