React-native TabNavigator внутри StackNavigator, не может перемещаться между экранами - PullRequest
1 голос
/ 19 марта 2019

Я использую реагирующую навигацию с моим приложением реагировать на натив.Я должен поместить TabNavigators в StackNavigator, чтобы использовать встроенную функцию заголовка.См. Ниже.

app.js

const FeedScreenStack = createStackNavigator({
  Feed: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  }
});

const ProfileScreenStack = createStackNavigator({
  Feed: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

feed.js:

import React from 'react';
import { View } from 'react-native';

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

    render(){
        return (
            <View style={{flex:1}}>
               ...
            </View>
        )
    }
}

export default feed;

При нажатии на profile приложение может перейти на экран профиля.Но он не переместится на экран подачи при нажатии на feed.Там нет предупреждений или ошибок, приложение просто не отвечает, когда я нажимаю на канал.Что я делаю не так?

1 Ответ

0 голосов
/ 19 марта 2019

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

Сделай так

const FeedScreenStack = createStackNavigator({
  FeedStack: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  }
});

const ProfileScreenStack = createStackNavigator({
  ProfileStack: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);
...