ReactNative的Navigator和BottomTabNavigator使用

创建一个简单的项目，目录结构如下

 

 

 

index.js为App注册入口代码

import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import InitApp from './InitApp'

AppRegistry.registerComponent('MyReactNativeApp', () => InitApp);

 

initApp.js为APP主入口做全局初始化navigator

/**
 * @format
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */
import React, { Component } from "react";
import { Image, FlatList, StyleSheet, Text, View } from "react-native";
import Ionicons from 'react-native-vector-icons/Ionicons';
import IconWithBadge from './app/utils/IconWithBadge'
import Home from './app/home/Home'
import Profile from './app/home/Profile'
import Detail from './app/detail/Detail'
const HOME = require('./app/img/home.png');
const HOME_P = require('./app/img/home_p.png');
const MINE = require('./app/img/mine.png');
const MINE_P = require('./app/img/mine_p.png');
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
/**
 * APP入口 做全局初始化navigator
 */
//首页路由
const HomeNavigator = createStackNavigator({
  Home: { screen: Home },
});
//Profile路由
const ProfileNavigator = createStackNavigator({
  Profile: { screen: Profile },
  Detail: { screen: Detail },
});

const HomeIconWithBadge = (props) => {
  // You should pass down the badgeCount in some other ways like react context api, redux, mobx or event emitters.
  return <IconWithBadge {...props} badgeCount={3} />;  
}

//底部tab
const BottomTabNavigator = createBottomTabNavigator({
  Home: HomeNavigator,
  Profile: ProfileNavigator,
}, {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Home') {
          iconName = `${focused ? HOME_P : HOME}`;
          // Sometimes we want to add badges to some icons. 
          // You can check the implementation below.
          IconComponent = HomeIconWithBadge;
        } else if (routeName === 'Profile') {
          iconName =`${focused ? MINE_P : MINE}`;
        }

        // You can return any component that you like here!
        return<Image source={iconName} style={{width:20,height:20}}/>;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'blue',
      inactiveTintColor: 'gray',
    },
  });
export default createAppContainer(BottomTabNavigator)

 

Home.js首页视图

import React, { Component } from "react";
import { Button, FlatList, StyleSheet, Text, View, TextInput } from "react-native";
import Swiper from 'react-native-swiper';
import { PullView } from 'react-native-pull';
import ToastExample from "../toast/ToastExample";

/**
 * 列表的数据源
 *
 * @type {*[]}
 */
const dataList = [
    {
        key: 'Banner',
        type: 1,
        content: 'THIS IS BANNER'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item1'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item2'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item3'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item4'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item5'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item6'
    },
    {
        key: 'LIST',
        type: 2,
        content: 'its my reactnative app item7'
    },
    {
        key: 'Button',
        type: 3,
        content: 'THIS IS BUTTON'
    },
];

export default class home extends React.Component {
    static navigationOptions = {
        header:null,  //隐藏顶部导航栏
    };
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    onPullRelease(resolve) {
        //do something
        setTimeout(() => {
            resolve();
        }, 1500);
    }
    onPressItem(item) {
        ToastExample.show(item.content, ToastExample.SHORT)
    }

    render() {
        return (
            // <View style={{justifyContent:"center"}}></View>
            <View style={styles.container}>
                <View style={styles.headSearch}>
                    <TextInput inlineImageLeft="icon_search" inlineImagePadding={10}
                        placeholder="搜索你要输入的内容" textAlignVertical="center" placeholderTextColor="gray" style={styles.textInput} />
                </View>
                <PullView onPullRelease={this.onPullRelease}>
                    <FlatList
                        data={dataList}
                        renderItem={this.renderItem.bind(this)}
                        keyExtractor={(item) => item}
                    />
                </PullView>


            </View>
        )
    }
    renderItem({ item }) {
        if (item.type === 1) {
            return (
                <View style={styles.banner}>
                    <Swiper showsButtons={true}>
                        <View style={styles.slide1}>
                            <Text style={styles.text}>Hello Swiper</Text>
                        </View>
                        <View style={styles.slide2}>
                            <Text style={styles.text}>Beautiful</Text>
                        </View>
                        <View style={styles.slide3}>
                            <Text style={styles.text}>And simple</Text>
                        </View>
                    </Swiper>
                </View>
            )
        } else if (item.type === 2) {
            return (
                <Text style={{ height: 60, textAlignVertical: "center", paddingLeft: 15 }} onPress={() => { this.onPressItem(item) }}>{item.content}</Text>
            )
        } else if (item.type === 3) {
            return (
                <Text>type3</Text>
            )
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    },
    headSearch: {
        justifyContent: "center",
        backgroundColor: 'blue',
        paddingLeft: 15,
        paddingRight: 15,
        height: 50,
    },
    text: {
        fontSize: 15,
        color: '#2A2A2A'
    },
    textInput: {
        paddingLeft: 5,
        height: 35,
        borderRadius: 20,
        marginLeft: 5,
        marginRight: 5,
        backgroundColor: 'white',
        fontSize: 12,
        color: 'gray',
    },
    banner: {
        height: 200,
    },
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    }
})

 

Profile.js 我的页面视图

import React, { Component } from "react";
import Detail from '../detail/Detail'
import { Button, StyleSheet, Text, View } from "react-native";
import { Segment, Container, Header, Icon, Left, Body, Right } from "native-base";
import { createStackNavigator, createAppContainer } from 'react-navigation';

export default class home extends React.Component {
    static navigationOptions = {
        header:null,  //隐藏顶部导航栏
    };
    constructor(props){
        super(props)
        this.state={
            btnText:0
        }
        this._timerStart()
    }
    // componentDidMount() {
    //     this.timer = setTimeout(() => {
    //       console.log("把一个定时器的引用挂在this上");
    //     }, 500);
    //   }
    render() {
        return (
            <View style={styles.container}>
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Button
                        title="Go to Details"
                        onPress={() => this._navigateToScreen("Detail")}
                    />
                    <Text>{this.state.btnText}</Text>
                </View>
            </View>
        )
    }
    _navigateToScreen(screen) {
        const {navigate} = this.props.navigation;
        navigate(screen);
    }
    _timerStart(){
        this.timer=setTimeout(()=>{
            console.log("把一个定时器的引用挂在this上");
            this.setState({
                btnText:10
            },function(){

            })
        },2000)
    }

}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    },
})

 

detail.js详情页

import React, { Component } from "react";
import { Button, FlatList, StyleSheet, Text, View, TextInput } from "react-native";
export default class Detail extends React.Component {
  static navigationOptions = {
    headerTitle: (
      <Text>自定义Header</Text>
    )
};
    render() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Details Screen</Text>
          <Button
            title="Go to Details... again"
            onPress={() => this.props.navigation.navigate('Details')}
          />
        </View>
      );
    }
  }

IconWithBadge.js

import React, { Component } from "react";
import Ionicons from 'react-native-vector-icons/Ionicons';
import {Text, View } from "react-native";

export default class IconWithBadge extends React.Component {
    render() {
      const { name, badgeCount, color, size } = this.props;
      return (
        <View style={{ width: 24, height: 24, margin: 5 }}>
          <Ionicons name={name} size={size} color={color} />
          { badgeCount > 0 && (
            <View style={{
              // If you're using react-native < 0.57 overflow outside of the parent
              // will not work on Android, see https://git.io/fhLJ8
              position: 'absolute',
              right: -6,
              top: -3,
              backgroundColor: 'red',
              borderRadius: 6,
              width: 12,
              height: 12,
              justifyContent: 'center',
              alignItems: 'center'
            }}>
              <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>{badgeCount}</Text>
            </View>
          )}
        </View>
      );
    }
  }

packgage.json插件

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "i": "^0.3.6",
    "native-base": "^2.12.1",
    "react": "16.8.3",
    "react-native": "^0.59.1",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-pull": "^2.0.2",
    "react-native-swiper": "^1.5.14",
    "react-native-tab-navigator": "^0.3.4",
    "react-navigation": "^3.6.1"
  }
}