Как передать параметр getParam на другой экран, используя реагирующую навигацию в компоненте без состояния для запуска мутации graphql? - PullRequest
0 голосов
/ 15 мая 2018

В соответствии с документами: параметры реагирования-навигации , я бы сделал что-то вроде этого (родительский):

this.props.navigation.navigate('Details', {
  itemId: 86,
  otherParam: 'anything you want here',
});

А потом переходя к ребенку

class DetailsScreen extends React.Component {
  render() {
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');

    return ( (..omited for brevity)

EDIT: Моя ситуация такова, что в одном экране / контейнере мы запускаем мутацию graphql, которая берет phoneNumber и получает код для пользователя. На следующем экране мне нужно взять этот phoneNumber, который пользователь только что вставил, чтобы запустить другую мутацию, которая принимает phoneNumber и код для аутентификации. Я не хочу использовать состояния, чтобы сделать это, так как на реагирующей навигации есть API.

Родитель:

signInUser(phoneNumber: string) {
  const { navigation, sendCode } = this.props
  sendCode({ variables: { phoneNumber } }) // graphql mutation
  navigation.navigate('Authenticate', { phoneNumber }) // passing 
                                            // phoneNumber as param

}

Ребенок:

export const AuthenticationCodeModal = (props: NavigationScreenProps) => {
  const {navigation} = props
  const phoneNumber = navigation.getParam(phoneNumber)
  // console.log(phoneNumber)
  // I need to get phoneNumber here and pass it as props to 
  // <AuthenticationFormContainer> which will fire up auth mutation
  return(
    <View style={styles.container} >
      <AuthenticationFormContainer/>
    </View>
  )
}

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Оказывается, это была простая синтаксическая ошибка значения, которое получает getParam, что решило мою проблему:

navigation.navigate('Authenticate', { phoneNumber: {phoneNumber: phoneNumber} })
0 голосов
/ 15 мая 2018

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...