zoukankan      html  css  js  c++  java
  • react native 使用TabNavigator编写APP底部导航

    第一步,下载依赖

    npm install react-native-tab-navigator --save

    第二步,引入

    import TabNavigator from 'react-native-tab-navigator';

    第三步,使用

    <TabNavigator>
                <TabNavigator.Item
                    selected={this.state.selectedTab === '首页'}
                    title="首页"
                    titleStyle={styles.tabText}
                    selectedTitleStyle={styles.selectedTabText}
                    renderIcon={() => <Image style={styles.icon} source={require("./images/home165.png")} />}
                    renderSelectedIcon={() => <Image style={styles.icon} source={require("./images/home165.png")} />}
                    onPress={() => this.setState({ selectedTab: '首页' })}>
                    <App/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === '我的'}
                    title="我的"
                    titleStyle={styles.tabText}
                    selectedTitleStyle={styles.selectedTabText}
                    renderIcon={() => <Image style={styles.icon} source={require("./images/twitter.png")} />}
                    renderSelectedIcon={() => <Image style={styles.icon} source={require("./images/twitter.png")} />}
                    onPress={() => this.setState({ selectedTab: '我的' })}>
                    <BlackHole/>
                </TabNavigator.Item>
            </TabNavigator>

    注意:选中和默认的图片这里为了方便我使用的是同一张图片

    然后执行react-native run-android 若看到如下界面说明你编写成功了,若没有成功,可以留言一起讨论

    如下是完整代码

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View,
      Image
    } from 'react-native';
    import TabNavigator from 'react-native-tab-navigator';
    import App from './layouts/main/App';//需要你自行建立编写js
    import BlackHole from './layouts/accout/BlackHole';//需要你自行建立编写js
    export default class Index extends Component {
        constructor(){
            super();
            this.state = {
                selectedTab: '首页',
            }
        }
      render() {
        return (
          <View style={styles.container}>
            <TabNavigator>
                <TabNavigator.Item
                    selected={this.state.selectedTab === '首页'}
                    title="首页"
                    titleStyle={styles.tabText}
                    selectedTitleStyle={styles.selectedTabText}
                    renderIcon={() => <Image style={styles.icon} source={require("./images/home165.png")} />}
                    renderSelectedIcon={() => <Image style={styles.icon} source={require("./images/home165.png")} />}
                    onPress={() => this.setState({ selectedTab: '首页' })}>
                    <App/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === '我的'}
                    title="我的"
                    titleStyle={styles.tabText}
                    selectedTitleStyle={styles.selectedTabText}
                    renderIcon={() => <Image style={styles.icon} source={require("./images/twitter.png")} />}
                    renderSelectedIcon={() => <Image style={styles.icon} source={require("./images/twitter.png")} />}
                    onPress={() => this.setState({ selectedTab: '我的' })}>
                    <BlackHole/>
                </TabNavigator.Item>
            </TabNavigator>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
       container: {
            flex: 1
        },
        tabText: {
            color: "#666666",
            fontSize: 13
        },
        selectedTabText: {
            color: "#ff8a00",
            fontSize: 13
        },
        icon: {
             25,
            height: 25,
        }
    });
  • 相关阅读:
    topcoder srm 320 div1
    topcoder srm 325 div1
    topcoder srm 330 div1
    topcoder srm 335 div1
    topcoder srm 340 div1
    topcoder srm 300 div1
    topcoder srm 305 div1
    topcoder srm 310 div1
    topcoder srm 315 div1
    如何统计iOS产品不同渠道的下载量?
  • 原文地址:https://www.cnblogs.com/ldlx-mars/p/9360380.html
Copyright © 2011-2022 走看看