Не удается правильно передать компоненты в NavigatorIOS при использовании с TabBarIOS

Question

Я новичок в ReactNative и начал использовать TabBarIOS компонент для проекта. я имею TabBarIOS компонент, который имеет 5 разных TabBarIOS.ItemComponent, Все они указывают другой компонент для представления. Эти разные компоненты имеют разные backgroundColor's и стили и titles но когда я меняю selectedTab изменение произошло, но свойства компонентов, таких как backgroundColor не влияет на представленный компонент. Для тестирования я войду в текст componentWillMount метод Component класс для каждого. И они успешно вошли. Вот частичные компоненты. Для первого Component который называется как Restaurants заголовок правильно отображается в navigationItem но в других navigationItem's заголовок пуст.

Я назвал свои компоненты как ViewControllers.

class RestaurantsComponent extends Component{

    componentWillMount(){
        console.log('restauranscomponent will mounted');
    }

    render(){
        return(
            <View style={{flex:1, backgroundColor:'blue'}}>
                <Text>ASDFSADF</Text>
            </View>
        )
    }
}


class SearchViewController extends Component{

    componentWillMount(){
        console.log('search view controller will mounted');
    }

    render(){
        return(
            <View style={{flex:1, backgroundColor:'green'}}>
                <Text>askfkjasljkdfjkla</Text>
            </View>
        )
    }
}

так далее..

Вот главная вкладка Component учебный класс:

export default class SimpleClass extends Component{
    constructor(props){
        super(props);

        this.state = {
            selectedTab: 'news'
        }
    }

    changeTab(selectedTab){
        this.setState({selectedTab})
    }

    render(){
        const { selectedTab } = this.state

        const styles = {
            backgroundColor: 'red'
        };

        return(
                    <TabBarIOS barTintColor="white"
                            unselectedItemTintColor="gray"
                            tintColor="red" 
                            style={{flex:1}}
                    >
                        <TabBarIOS.Item
                            selected={selectedTab === 'news'}
                            title="Restaurants"
                            icon={require('./assets/restaurants.png')}
                            onPress={() => this.changeTab('news')}
                        >

                        <NavigatorIOS
                                style={styles.nav}
                                initialRoute={{
                                    component: RestaurantsComponent,
                                    title : 'Restaurants'
                                   }}
                            />
                        </TabBarIOS.Item>

                        <TabBarIOS.Item
                            title="Search"
                            selected={selectedTab === 'news2'}
                            onPress={() => this.changeTab('news2')}
                            icon={require('./assets/searchIco.png')}
                        >
                            <NavigatorIOS
                                style={styles.nav}
                                initialRoute={{
                                    component: AnotherComponent,
                                    title : 'Search'
                                   }}
                            />
                        </TabBarIOS.Item>
                        ...
                          .../>

Вот этот компонент в navigationItem за Restaurants

И для других:

Я хочу вырезать элемент tabBar для скриншота, но TabBarIOS успешно работает, если вы не возражаете.

Есть ли какая-либо ошибка, которая в настоящее время вызывает у меня или что происходит с navigationItem's атрибуты заголовка?

Answer 1

Я нашел свой ответ по тому, как я не понял, что здесь происходит, но при просмотре документации и некоторых статей, использование NavigatorIOS в настоящее время делает беспорядок. И есть крутой вопрос и ответ, который я думаю, важно понять createNavigator...,

Вот ссылка.

Существует близкий подход к использованию TabBar, Navigation и т.д., которые названы createStackNavigator и создайте BottomTabNavigator. Как говорят нам имена, createStackNavigator в настоящее время работает как UINavigationController а также createBottomTabNavigator работает как UITabBarController, Так что это основная реализация этих подходов.

const firstTabStack = createStackNavigator({
  HomeAlways: {
    navigationOptions:{
      title:'WASSUP1'
    },
    screen:BooksNav
  }
})

const secondTabStack = createStackNavigator({
  HelpAlways: {
    navigationOptions:{
      title:'WASSUP2'
    },
    screen:AddBook
  }
})

И вот, наконец, мы пришли с Tab реализация.

const Tab = createBottomTabNavigator({
    Home: {
    screen: firstTabStack,
    navigationOptions:{
      title:'title1'
    }
  },
  Another: {
    screen: secondTabStack,
    navigationOptions:{
      title:'title2'
    }
  }
});

Что я сделал с этим кодом?

За iOS Разработчики, чтобы понять, что там происходит, есть 2 контроллера (UIViewController или же Component в RN), и они имеют разные UINavigationController's а также разные названия. И все эти контроллеры будут стеком UITabBarController ' viewControllers,

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