Реагирует на переопределение собственной навигации goBack () кнопки возврата заголовка в Stack Navigator - PullRequest
Новая
       10

Реагирует на переопределение собственной навигации goBack () кнопки возврата заголовка в Stack Navigator

0 голосов
/ 08 апреля 2020

Я хочу настроить поведение кнопки возврата по умолчанию в навигаторе стека локально на один экран.

В деталях, предполагающих, что в стеке есть screen1 | screen2, я хочу передать некоторые реквизиты из screen2 на screen1 после нажатия кнопки.

Я потратил много времени на чтение документов React Navigation, поиск по inte rnet и кодирование, но я не могу этого сделать.

ИЗ DOCS

Возможно, что в некоторых обстоятельствах вы хотите настроить кнопку «Назад» больше, чем вы можете с помощью указанных выше опций, и в этом случае вы можете установить для параметра headerLeft значение React-элемента, который будет отображаться. Я знаю, что проблема касается функции goBack () компонента headerRight.

Я хочу переопределить функцию goBack () по умолчанию, относящуюся к кнопке headerLeft назад, чем-то вроде navigation.navigate ("previousScreen", {{..реквизит}}).

И (это очень важно !!) Я хочу использовать это поведение локально для определенного c экрана, а не глобально.

Я пробовал что-то подобное, но это не так т работает. 

 export default function App(){
 return(
 <NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="FirstScreen" component={FirstScreen}/>
    <Stack.Screen name="SecondScreen" component={SecondScreen} options={{headerLeft: () => (
        <HeaderBackButton
          onPress={() =>navigation.navigate("FirstScreen",{//stuff//})}
          title="Info"
          color="#fff"
        />
      ),}}/>
  </Stack.Navigator>
</NavigationContainer>
 )}

Ответы [ 2 ]

0 голосов
/ 08 апреля 2020

Попробуйте передать navigationOptions на указанный экран c: 

export default function App(){
 return(
 <NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="FirstScreen" component={FirstScreen}/>
    <Stack.Screen name="SecondScreen" component={SecondScreen}
       navigationOptions: ({ navigation }) => ({ headerLeft: (<HeaderBackButton onPress={() => {}}/>)
    })}}/>
  </Stack.Navigator>
</NavigationContainer>
 )}

Либо вы можете указать его там на navigation. Или на Second screen попробуйте это: 

class SecondScreen extends React.Component {
  static navigationOptions = {
    headerLeft: (
      <Button
        onPress={() => alert('This is a back button!')}
        title="Title"
        color="#fff"
      />
    ),
  };
}
0 голосов
/ 08 апреля 2020

Когда компонент установлен, зарегистрируйте кнопку возврата, нажмите слушатель 

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
}

Затем в функции вы можете проверить и обработать действие, например: 

onBackButtonPressAndroid = () => {
    // Check if the current screen is focused or a subscreen is perhaps
    if (this.props.navigation.isFocused()) {
        if (someCondition) {
            // Do a navigation to a custom screen, pass props here if needed
            this.props.navigation.navigate('search')
            return true
            // Return true if you want to tell react navigation you've handled the back press
        }
        else if (this.state.offsetTop > 10) {
            // Ex. for scrolling to top
            this.scrollToTop()
            this.setState({
                offsetTop: 0,
            })
            return true
        }
    }
    // Return false if you want to tell react navigation you didn't handle the back press
    return false
}
...