一、初始化项目
1、在终端执行react-native init MyApp 创建的ReactNative项目版本号与你终端安装的ReactNative版本号相同
2、在终端执行react-native init MyApp --version 0.44.0可指定ReactNative版本创建项目
二、TabNavigator使用
1、在终端执行命令npm install react-native-tab-navigator --save进行安装(加上--save才会添加到package.json文件中)
2、在index.ios.js文件中导入import TabNavigator from 'react-native-tab-navigator';
3、在render()中加入代码
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_popular'}
selectedTitleStyle={{color:'red'}}
title='最热'
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
badgeText="1"
onPress={() => this.setState({selectedTab: 'tb_popular'})}>
<View style={styles.page1}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_trending'}
selectedTitleStyle={{color:'red'}}
title='趋势'
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
badgeText="1"
onPress={() => this.setState({selectedTab: 'tb_trending'})}>
<View style={styles.page1}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_favorite'}
selectedTitleStyle={{color:'red'}}
title='收藏'
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
badgeText="1"
onPress={() => this.setState({selectedTab: 'tb_favorite'})}>
<View style={styles.page1}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_my'}
selectedTitleStyle={{color:'red'}}
title='我的'
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_trending.png')} />}
onPress={() => this.setState({selectedTab: 'tb_my'})}>
<View style={styles.page2}></View>
</TabNavigator.Item>
</TabNavigator>
index.ios.js的完整代码为:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
export default class imoocc extends Component {
constructor(props){
super(props);
this.state={
selectedTab:'tb_popular',
}
}
render() {
return (
<View style={styles.container}>
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_popular'}
selectedTitleStyle={{color:'red'}}
title='最热'
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
badgeText="1"
onPress={() => this.setState({selectedTab: 'tb_popular'})}>
<View style={styles.page1}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_trending'}
selectedTitleStyle={{color:'red'}}
title='趋势'
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
badgeText="1"
onPress={() => this.setState({selectedTab: 'tb_trending'})}>
<View style={styles.page1}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_favorite'}
selectedTitleStyle={{color:'red'}}
title='收藏'
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
badgeText="1"
onPress={() => this.setState({selectedTab: 'tb_favorite'})}>
<View style={styles.page1}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_my'}
selectedTitleStyle={{color:'red'}}
title='我的'
renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')}/>}
renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'red'}]} source={require('./res/images/ic_trending.png')} />}
onPress={() => this.setState({selectedTab: 'tb_my'})}>
<View style={styles.page2}></View>
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
page1:{
flex:1,
backgroundColor:'red',
},
page2:{
flex:1,
backgroundColor:'yellow',
},
image:{
height:22,
width:22
},
});
AppRegistry.registerComponent('imoocc', () => imoocc);
Navigator的基本使用
1、使用流程
屏幕快照 2018-09-18 上午11.13.14.png
2、使用import {Navigator} from 'react-native-deprecated-custom-components';进行导入。页面在渲染的时候会调用renderScene方法
3、示例
render() {
return (
<Navigator
/*初始化路由，Navigator首先显示的是哪一个界面。默认页面,
name: 默认页面组件名, component: 默认页面渲染组件*/
initialRoute={{ name: 'Boy', component: Boy }}
// 页面切换动画
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
/* 页面在渲染的时候会调用 将页面参数和navigator注入渲染组件中 */
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}}
/>
)
}
4、Navigator方法
getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
jumpTo(route) - 跳转到已有的场景并且不卸载。
push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
pop() - 跳转回去并且卸载掉当前场景
replace(route) - 用一个新的路由替换掉当前场景
replaceAtIndex(route, index) - 替换掉指定序列的路由场景
replacePrevious(route) - 替换掉之前的场景
resetTo(route) - 跳转到新的场景，并且重置整个路由栈
immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
popToRoute(route) - pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载。
popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。
5、Navigator属性
initialRoute object
提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性，它将被默认设置成一个只含有initialRoute的数组。
initialRoute示例
/*初始化路由，Navigator首先显示的是哪一个界面。默认页面,
name: 默认页面组件名, component: 默认页面渲染组件*/
initialRoute={{ name: 'Boy', component: Boy }}
configureScene function
可选的函数，用来配置场景动画和手势。会带有两个参数调用，一个是当前的路由，一个是当前的路由栈。然后它应当返回一个场景配置对象
configureScene示例
(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
或者
// 页面切换动画
configureScene={(route) => {
return Navigator.SceneConfigs.PushFromRight;
}}
SceneConfigs的值为
Navigator.SceneConfigs.PushFromRight (默认)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
renderScene function
必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。
renderScene示例
(route, navigator) =>
<MySceneComponent title={route.title} navigator={navigator} />
或者
/* 页面在渲染的时候会调用 将页面参数和navigator注入渲染组件中 */
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}}
initialRouteStack [object]
提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性，它将被默认设置成一个只含有initialRoute的数组。
navigationBar node
可选参数，提供一个在场景切换的时候保持的导航栏。
navigator object
可选参数，提供从父导航器获得的导航器对象。
onDidFocus function
每当导航切换完成或初始化之后，调用此回调，参数为新场景的路由
onWillFocus function
会在导航切换之前调用，参数为目标路由
sceneStyle [View#style]
将会应用在每个场景的容器上的样式。
弹出视图(三方：react-native-popover)
直接把popover.js文件导入项目中
示例代码：
<Popover
isVisible={this.state.isVisible}
fromRect={this.state.buttonRect}
placement="bottom"
onClose={()=>this.closePopover()}
contentStyle={{backgroundColor:'#343434',opacity:0.82}}
>
{timeSpanTextArray.map((result,i,arr)=>{
return <TouchableOpacity
key={i}
underlayColor='transparent'
onPress={()=>this.onSelectTimeSpan(arr[i])}
>
<Text
style={{fontSize:18,color:'white',fontWeight:'400',padding:8}}
>{arr[i].showText}</Text>
</TouchableOpacity>
})}
</Popover>
弹出视图的代码:其中button为自己设置的标识
showPopover(){
this.refs.button.measure((ox,oy,width,height,px,py) => {
this.setState({
isVisible:true,
buttonRect:{x:px,y:py,width:width,height:height}
});
});
}
关闭弹出视图的代码:
closePopover(){
this.setState({
isVisible:false
})
}
