react native 底部按钮切换

在react   native  中底部按钮的切换  主要的是运用的是

第一种方法：<TabBarNavigator/>这个组件,具体的代码实现如下:

  render() {
    return (
      <TabBarNavigator
        navTintColor='#fff'
        navBarTintColor='#333'
        tabTintColor='#649F0C'
        tabBarTintColor='#f0f0f0'>
        <TabBarNavigator.Item title='最新' defaultTab icon={require('image!newest')}>
          <HomePage />
        </TabBarNavigator.Item>
        <TabBarNavigator.Item title='往期' icon={require('image!old')}>
          <HistoryPage />
        </TabBarNavigator.Item>
        <TabBarNavigator.Item title='搜索' icon={require('image!search')}>
          <SearchPage />
        </TabBarNavigator.Item>
        <TabBarNavigator.Item title='我的'  icon={require('image!my')}>
          <MinePage />
        </TabBarNavigator.Item>
        <TabBarNavigator.Item title='我的'  icon={require('image!my')}>
          <MinePage />
        </TabBarNavigator.Item>
      </TabBarNavigator>
    )
  }

 

需要注意的是:小编到现在还不知道底端按钮点击是变色是怎么设置的,还没有找到相应的代码,系统默认是变成蓝色

另一种实现方法, 参考 http://www.oschina.net/translate/going-native-with-react

 

第二种方法，是运用组件<TabNavigator>

1、首先当然是在项目中装入插件

react-native-tab-navigator, 安装代码 npm install react-native-tab-navigator --save

2、创建component  时，先初始化按钮的默认的颜色与点击后的颜色

   static defaultProps={
         selectedColor:'#1683FB',
         narmalColor:'#a9a9a9'
     };

 

3、其次设置按钮的name

     

constructor (props){
         super(props);
         this.state={
             selectedTab:'home',
             tabName:['标题','标题','标题','标题']
         }
     }

 

4、核心代码：

  render() {
        const {tabName} = this.state;
        return(
        <TabNavigator
            hidesTabTouch ={true}
            tabBarStyle={styles.tabbar}
            scenceStyle={styles.scence} >
             <TabNavigator.Item
                 tabStyle={styles.tabStyle}
                 title={tabName[0]}
                 selected={this.state.selectedTab==='home'}
                 selectedTitleStyle={{color:"#1683FB"}}
                 renderIcon={()=><Image style={styles.tab} source={ require('../img/iconfont-qiandao.png')} />}
                 onPress={()=> this.setState({selectedTab:'home'})}>
                 {<Home/>}
             </TabNavigator.Item>


            <TabNavigator.Item
                tabStyle={styles.tabStyle}
                title={tabName[1]}
                selected={this.state.selectedTab==='compass'}
                selectedTitleStyle={{color:"#1683FB"}}
                renderIcon={()=><Image style={styles.tab} source={ require('../img/iconfont-qiandao.png')} />}
                onPress={()=> this.setState({selectedTab:'compass'})}
            >
                {<Text>标题2</Text>}
            </TabNavigator.Item>

            <TabNavigator.Item
                tabStyle={styles.tabStyle}
                title={tabName[2]}
                selected={this.state.selectedTab==='notification'}
                selectedTitleStyle={{color:"#1683FB"}}
                renderIcon={()=><Image style={styles.tab} source={ require('../img/iconfont-qiandao.png')} />}
                onPress={()=> this.setState({selectedTab:'notification'})}
            >
                {<Text>标题3</Text>}
            </TabNavigator.Item>

            <TabNavigator.Item
                tabStyle={styles.tabStyle}
                title={tabName[3]}
                selected={this.state.selectedTab==='me'}
                selectedTitleStyle={{color:"#1683FB"}}
                renderIcon={()=><Image style={styles.tab} source={ require('../img/iconfont-qiandao.png')} />}
                onPress={()=> this.setState({selectedTab:'me'})}
            >
                {<Text>标题4</Text>}
            </TabNavigator.Item>
        </TabNavigator>
          );
        }
     }