zoukankan      html  css  js  c++  java
  • 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>
              );
            }
         }
  • 相关阅读:
    【Educational Codeforces Round 101 (Rated for Div. 2) C】Building a Fence
    【Codeforces Round #698 (Div. 2) C】Nezzar and Symmetric Array
    【Codeforces Round #696 (Div. 2) D】Cleaning
    【Codeforces Round #696 (Div. 2) C】Array Destruction
    【Educational Codeforces Round 102 D】Program
    【Educational Codeforces Round 102 C】No More Inversions
    【Good Bye 2020 G】Song of the Sirens
    【Good Bye 2020 F】Euclid's nightmare
    使用mobx入门
    requestAnimationFrame 控制速度模拟setinterval
  • 原文地址:https://www.cnblogs.com/leyan/p/5780223.html
Copyright © 2011-2022 走看看