Как передать реквизит на все вкладки createBottomTabNavigator

Question

Мое приложение вызывает createBottomTabNavigator из createSwitchNavigator, используя следующее this.props.navigation.navigate('AppMenu', {UserName: 'First Name'}); createBottomTabNavigator состоит из 2 вкладок, одна из которых является навигатором стека, а вторая - просто компонентом React.Когда я перехожу к initialRouteName в Stack Navigator, пропел, в котором я прошел, становится доступным, но если я выберу вторую вкладку Tab Navigator, опора недоступна.

Есть ли способ, которым я могу пройтиПропорция ко всем вкладкам Навигатора Bottom Tab Navigator при его рендеринге?

Вот диаграмма приложений и пример кода, который можно запустить в Snack.

import React from 'react';
import { Text, View, Button } from 'react-native';
import { createBottomTabNavigator, createStackNavigator, createSwitchNavigator } from 'react-navigation';

class LoginScreen extends React.Component {
  _navToMain = () => {
    console.log('Login Screen: Passing user: First Name');
    this.props.navigation.navigate('AppMenu', {UserName: 'First Name'});
  }
  render () {
    return (
      <View style={{flexDirection: 'column', paddingTop:20}}>
        <Text>Pass UserName prop to createBottomTabNavigator</Text>
        <Button title='Login!' onPress={this._navToMain}/> 
      </View>
    )
  }
}

class SyncScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: 'Sync Screen',
    };
  };
  render () {
    return (  
      <View style={{flexDirection: 'column', paddingTop:20}}>
        <Text>Sync Screen Navigation Prop UserName (missing!): {JSON.stringify(this.props.navigation.getParam('UserName'))}</Text>          
        <Button title='Test Button' onPress={() => {}} />
      </View>
    );
  }
}

class AppMenuScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: 'Stack Navigator',
    };
  };

  _navToOne = () => {
    console.log('Going to Stack One')
    this.props.navigation.navigate('StackOne', {UserName: this.props.navigation.getParam('UserName')});
  }

  render () {
    return (   
      <View style={{flexDirection: 'column'}} >  
        <Text>App Menu Navigation Prop UserName passed from SwitchNavigator: {JSON.stringify(this.props.navigation.getParam('UserName'))}</Text>
        <Button title='Screen one' onPress={this._navToOne} />         
      </View> 
    )
  }
}

class StackOneScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: 'Stack One Screen',
    };
  };
  render () {
    return (         
      <View style={{flexDirection: 'row'}} >  
        <Text>Stack One Screen Navigation Props: {JSON.stringify(this.props.navigation.getParam('UserName'))}</Text>       
      </View> 
    )
  }
}

const AppStack = createStackNavigator(
  {
    AppMenu: AppMenuScreen,
    StackOne: StackOneScreen,    
  },
  {
    initialRouteName: "AppMenu",
    navigationOptions: {
      headerTintColor: "#a41034",
      headerStyle: {
        backgroundColor: "#fff"
      }
    }
  }
);

const MainTabs = createBottomTabNavigator(
  {
    'Apps': { screen: AppStack },
    'Sync': { screen: SyncScreen },
  },
  {
    navigationOptions: ({ navigation }) => ({
      title: navigation.state,      
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
      }
    }),
    tabBarOptions: {
      activeTintColor: 'red',
      inactiveTintColor: 'gray',
      tabBackgroundColor: 'black',      
      labelStyle:{
        fontSize: 24,
        marginBottom:10,
      }       
    },
    animationEnabled: true,
    swipeEnabled: false,
  }
);

const AppNavigator = createSwitchNavigator(
  {
    Login: LoginScreen,
    Main: MainTabs
  },
  {
    initialRouteName: 'Login',
    backBehavior: "initialRoute",
  }
);

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

Package.json

"react": "16.5.0",
"react-native": "0.57.1",    
"react-navigation": "^2.0.0"

Answer 1

Вы можете передавать реквизиты при навигации, используя

 _navToOne = () => {
  console.log("Going to Stack One");
  this.props.navigation.navigate({
    routeName: "StackOne",
    params: { UserName: this.props.navigation.state.params.UserName }
  });
};

, если вы хотите получить доступ к реквизитам, переданным с помощью навигации

this.props.navigation.state.params.PROPNAME
// PROPNAME is the prop you passed and want to get

Answer 2

Это просто временное решение, по крайней мере, этот код может решить вашу проблему

---

Когда я перехожу к initialRouteName стекового навигатора, пропеллер, в котором я прошелдоступно, но если я выберу вторую вкладку в Навигаторе вкладок, пропеллер недоступен

, потому что вы только что отправили параметр в AppMenu, используя this.props.navigation.navigate('AppMenu', {UserName: 'First Name'});

UserName доступно на обеих вкладках после изменения кода LoginScreen класса:

class LoginScreen extends React.Component {
  _navToMain = () => {
    console.log('Login Screen: Passing user: First Name');
    //-------add this-------
    this.props.navigation.navigate('Sync', {UserName: 'First Name'});
    //----------------------
    this.props.navigation.navigate('AppMenu', {UserName: 'First Name'});
  }
  render () {
    return (
      <View style={{flexDirection: 'column', paddingTop:20}}>
        <Text>Pass UserName prop to createBottomTabNavigator</Text>
        <Button title='Login!' onPress={this._navToMain}/> 
      </View>
    )
  }
}