Question

我是ReactNative的新手，并开始在项目中使用TabBarIOS组件。我有TabBarIOS组件，它有5个不同的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>
        )
    }
}

等等。

这是主标签栏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...的理解很重要。

这里是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个控制器（RN中的UIViewController或Component），并且它们具有不同的UINavigationController's还有不同的标题所有这些控制器都将堆积在UITabBarController'viewControllers中。

下面的图像是运行成功的证明。，

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

1 个答案: