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

Question

我是 ReactNative 的新手，开始在项目中使用 TabBarIOS 组件。我有 TabBarIOS 组件，其中有 5 个不同的 TabBarIOS.Item Component。这些每一个都指向另一个组件来呈现。这些不同的组件都有不同的 backgroundColor's 和样式 titles 但是当我更改 selectedTab 时，更改已经发生但是 backgroundColor 等组件的属性不会影响呈现成分。为了进行测试，我在 Component class 的 componentWillMount 方法中为每个文本记录了一个文本。他们登录成功。这是部分组件。对于名为 Restaurants 的第一个 Component，标题在 navigationItem 中正确显示，但在其他 navigationItem's 中标题为空。

我将我的组件称为 ViewController。

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 class:

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 的使用目前正在 mess.And有一个很酷的问答，我认为了解 createNavigator... 很重要。

这里是 link.

有一种使用 TabBar、Navigation 等的接近方法，它们被命名为 createStackNavigator 和 createBottomTabNavigator。顾名思义，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 Controller（RN 中的 UIViewController 或 Component），它们有不同的 UINavigationController's 以及不同的标题。所有这些控制器都将堆叠 UITabBarController' viewControllers.

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

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

Cannot pass correctly Components to NavigatorIOS when using with TabBarIOS

javascript

react-native

navigator-ios