javascript - 与 TabBarIOS 一起使用时无法将组件正确传递给 NavigatorIOS

Question

我是新手ReactNative并开始在TabBarIOS项目中使用组件。我有TabBarIOS5 个不同的组件TabBarIOS.Item Component。这些都指向另一个要呈现的组件。这些不同的组件都有不同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>
        )
    }
}

ETC..

这是主要的标签栏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>
                        ...
                          .../>

这是navigationItemfor中的组件Restaurants

对于其他人：

我没有为屏幕截图剪切 tabBar 项目，但TabBarIOS如果你介意的话，它可以成功。

目前是否有任何由我引起的错误或navigationItem's标题属性发生了什么？

Answer 1

我已经找到了我的答案，但我还没有弄清楚这里发生了什么，但是在查看文档和一些文章时，使用NavigatorIOS目前正在变得一团糟。还有一个很酷的问题和答案，我认为它很重要了解createNavigator...。

这是链接。

有一种使用命名和 createBottomTabNavigatorTabBar等的接近方法。正如名称告诉我们的那样，目前的工作方式和工作方式一样。所以这是这些方法的基本实现。NavigationcreateStackNavigatorcreateStackNavigatorUINavigationControllercreateBottomTabNavigatorUITabBarController

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.

下面的图片是成功运行的证明。 ,