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 ;
},
}),
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 (
//
item}
/>
)
}
renderItem({ item }) {
if (item.type === 1) {
return (
Hello Swiper
Beautiful
And simple
)
} else if (item.type === 2) {
return (
{ this.onPressItem(item) }}>{item.content}
)
} else if (item.type === 3) {
return (
type3
)
}
}
}
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 (
)
}
_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: (
自定义Header
)
};
render() {
return (
Details Screen
);
}
}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 (
{badgeCount}
)}
);
}
}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"
}
}