创建一个简单的项目,目录结构如下
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"
}
}