передать параметры между двумя стеками - React Native - PullRequest
Новая
       35

передать параметры между двумя стеками - React Native

0 голосов
/ 29 декабря 2018

мое приложение должно иметь экран входа в систему с Google, поэтому при входе в систему оно переходит на экран меню.

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

в App.js: 

const AuthStack = createStackNavigator({
  LoginSplashScreen: LoginSplashScreen 
});
const AppStack = createStackNavigator({ 
  MenuScreen:MenuScreen,
  DetailsScreen: DetailsScreen,
  PhotoScreen: PhotoScreen,
  DocumentScreen: DocumentScreen,
  AudioScreen: AudioScreen,
  ScheduleScreen: ScheduleScreen,
  SettingsScreen: SettingsScreen,
  FilesScreen: FilesScreen,
  GalleryScreen: GalleryScreen
   });


const Root= createAppContainer(createSwitchNavigator(
  {
    AuthStack:AuthStack,
    AppStack:AppStack
  },
  {
    initialRouteName: 'AuthStack',
  }
));

export default class App extends React.Component {
  render() {
    return (
      <Root/>  
    )
  }
}

, поэтому в LoginSplashScreen после аутентификации я использовал этот код для навигации: 

    this.props.navigation.navigate('AppStack', {
      signedIn: true,
      name: result.user.name,
      photoUrl: result.user.photoUrl
    });

навигация работает отлично, но параметры 'name', 'SignIn', 'photoUrl' фактически не передаются при предупреждении 

    Alert.alert('',JSON.stringify(this.props.navigation.state.params))

на экране меню (второйстек), он пуст

что я делаю не так?

почему мои параметры не передаются?потому что мне может понадобиться навигация по другому ящику.

Есть ли способ установить глобальные параметры для всех экранов в приложении?

Есть лилучший способ избежать нажатия на экран меню и не получить экран входа в систему?

РЕДАКТИРОВАТЬ:

Мне удалось решить эту конкретную проблему с установкой глобальнойпараметр с: 

global.param= result.param;

, но мне все еще нужен ответ для перехода между 2 отдельными стеками

Ответы [ 2 ]

0 голосов
/ 29 декабря 2018

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

Когда вы используете this.props.navigation из LoginSplashScreen, вы фактически находитесь в изолированной области навигации вашего AuthStack, которая ограничена маршрутами его собственного навигатора.Теперь, когда вы связываете оба стека в одном навигаторе как Routes SwitchNavigator, вы входите в область действия родительского навигатора, которая дает собственную навигационную опору, поэтому, если бы вы использовали navigation опору коммутаторанавигатор, тогда вы бы получили параметры в вашем AppStack, но с тех пор.

Я бы предложил следующие три способа для правильного выполнения этого:

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

Код должен выглядеть следующим образом: 

const Root= createAppContainer(createSwitchNavigator({
   LoginSplashScreen: LoginSplashScreen 
   AppStack:AppStack
}, {
initialRouteName: 'LoginSplashScreen',
}));

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

Использование нового компонента вместо AppStack в навигаторе коммутатора, при этом LoginSplashScreen является одним из прямых маршрутов SwitchNavigator и выполняется рендеринг AppStack внутри нового компонента и прохождениеполучил params как screenProps в AppStack, затем просто использовал screenProps в стековых маршрутах.

Код должен выглядеть следующим образом: 

 const Root= createAppContainer(createSwitchNavigator({
   LoginSplashScreen: LoginSplashScreen, 
   MyMediatorScreen: MyFancyComponent
}, {
initialRouteName: 'AuthStack',
}));

Например,FancyComponent будет выглядеть следующим образом: 

class MyFancyComponent extends React.Component{
   constructor (props){
      super (props); 
   }

   render () {
     const {params} = this.props.navigation.state;
     return (
        <AppStack screenProps = {params} />
     )
   }
}
0 голосов
/ 29 декабря 2018

Насколько я вижу в вашем коде, все вроде бы хорошо, может быть, вы JSON.stringifying, возможно, попробуйте получить каждый параметр отдельно, т.е. this.props.navigation.getParam('signedIn', false);

ДляВ процессе аутентификации с использованием react-navigation вы должны следовать этому руководству: https://reactnavigation.org/docs/en/auth-flow.html, таким образом у вас не будет возврата кнопки «Назад» после входа в систему.

Для хранения таких данных, какответ на запрос аутентификации, который вы получите от Google, я бы порекомендовал использовать AsyncStorage или другую форму библиотеки хранения, например react-redux.Это очень простой пример, использующий react-redux: https://medium.com/@aurelie.lebec/redux-and-react-native-simple-login-example-flow-c4874cf91dde.

Я бы лично порекомендовал систему хранения, поскольку все ваше приложение может иметь доступ к состоянию auth, а не постоянно отправлять его в качестве параметров.

...