react native 底部按钮切换

时间：2024-09-02 10:34:08

在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>

          );

        }

     }

相关文章