Как передать параметры в маршруты с помощью Tab Navigator НЕ стека навигатора - PullRequest
Новая
       20

Как передать параметры в маршруты с помощью Tab Navigator НЕ стека навигатора

1 голос
/ 02 апреля 2019

Я использую навигационную библиотеку реагирования, в частности createBottomTabNavigator

В документах на https://reactnavigation.org/docs/en/params.html объясняется, как передавать параметры между маршрутами с помощью стекового навигатора, но я использую навигатор с вкладками, и я не могу найтивсе, что мне выпадает, объясняет, как это сделать в настройках навигации по вкладкам

Навигатор моей вкладки в App.js: 

const BottomTabMenu = createBottomTabNavigator (
  {
    WatchList: { screen: WatchListScreen },
    Alerts: { screen: AlertsScreen },
    Analytics: { screen: AnalyticsScreen },
    Settings: { screen: SettingsScreen },
  },
  {
    initialRouteName: 'WatchList',
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'WatchList') { iconName = 'md-list'; }  
        if (routeName === 'Alerts') { iconName = 'md-alert'; }  
        if (routeName === 'Analytics') { iconName = 'md-analytics'; }  
        if (routeName === 'Settings') { iconName = 'md-settings'; }

        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);
const AppContainer = createAppContainer(BottomTabMenu);

Маршрут watchList содержит jsonfile, называемый символами, которые я хочуперейти к маршруту оповещений, который находится в alertsScreen.js 

export default class WatchListScreen extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            symbols: [],
        }
    }  
LOTS OF OTHER STUFF

ALERTSSCREEN.JS 

export default class AlertsScreen extends React.Component {

    render() {
        //according to the docs, this is how to receive in the props
        const { navigation } = this.props;
        const jsonWatchList = navigation.getParam('jsonWatchList', '[]');

        return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>blah blah blah</Text>
        </View>
        );
    }
}

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

this.props.navigation.navigate('Alerts', {
              jsonWatchList: [lots of data here],
            });

Единственная проблема в том, что я не знаю, куда она должна идти.

1 Ответ

1 голос
/ 02 апреля 2019

Это хорошо документировано в вашей ссылке (https://reactnavigation.org/docs/en/params.html).. Объясняет, как передавать параметры между маршрутами. Неважно, используете ли вы stackNavigator или createBottomTabNavigator

.Ваши параметры, которые вы хотели бы сделать:

this.props.navigation.navigate('jsonWatchList', { jsonWatchList: [lots of data here], });

И на другом экране получите их как:

const data = this.props.navigation.getParam('jsonWatchList');

...