Как добавить действия для реагирования на кнопки заголовка навигации, которые взаимодействуют с методами компонента класса?

В приложении есть реагирующая навигация с правой кнопкой заголовка, которая при нажатии должна обновлять данные на экране. Используя static navigationOptions () в компоненте класса, я добавил правую кнопку заголовка, как показано ниже:

static navigationOptions = ({navigation}) => {
    return {
      headerRight: () => (
        <TouchableOpacity
          style={{
            width: 30,
            height: 30,
            paddingRight: 20,
          }}
          onPress={() => this.sortData}>
          <Image source={require('../../assets/sort-icon/sort.png')} />
        </TouchableOpacity>
      ),
    };
  };

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

Согласно документации по реагированию на навигацию, взаимодействие кнопки заголовка с ее компонентами экрана достигается через navigation.setOptions () внутри компонента экрана. https://reactnavigation.org/docs/header-buttons/ Но я не понимаю , как использовать его внутри компонента класса. Поскольку я новичок в разработке React Native, просьба помочь мне в решении этой проблемы.


react-native reactjs javascript react-navigation-v5
person Megha    schedule 18.07.2020    source источник
comment
отправить действие redux или context api   -  person cybercoder    schedule 18.07.2020
comment
Но как мне отправить действие в redux без использования this.props?   -  person Megha    schedule 18.07.2020
comment
Вы должны определить активные заголовки при инициализации стека, а не как статический метод внутри дочернего стека.   -  person cybercoder    schedule 18.07.2020

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете справиться с этим во время создания стека, как в этом примере:

  return (
    <Stack.Navigator
      keyboardHandlingEnabled={true}
      screenOptions={({route, navigation}) => ({
        headerLeft: () => (
          <TouchableOpacity
            style={{
              paddingHorizontal: 15,
              height: '100%',
              justifyContent: 'center',
            }}
            onPress={() => navigation.toggleDrawer()}>
            <Icon size={26} light name="bars" />
          </TouchableOpacity>
        ),
        headerTitleAlign: 'center',
        headerTitleStyle: {
          ...styles.Text,
        },
        headerRight: () => (
          <TouchableOpacity
            style={{paddingRight: 10}}
            onPress={() =>
              AsyncStorage.removeItem('@myapp/workspace').then(() =>
                navigation.replace('WorkSpaces'),
              )
            }>
            <Icon light name="exchange" size={24} />
          </TouchableOpacity>
        ),
        title: netInfo.isConnected
          ? connected
            ? settings?.appName
            : 'connecting...'
          : 'Wait for Network connection...',
        animationEnabled: true,
      })}>
      <Stack.Screen name="CustomerTabs" component={CustomerTabs} />
    </Stack.Navigator>
  );
person cybercoder    schedule 18.07.2020