项目中用app.js去承载路由，然后通过路由管理页面跳转。
'use strict';
import React,{Component} from 'react';
import {View, Text,TouchableHighlight,Image} from 'react-native';
import {Router, Stack, Scene, Tabs, Actions} from 'react-native-router-flux';
import Login from './code/Login/Components/Login.js';
import Register from './code/Login/Components/Register.js';
import Mine from './code/Mine/components/Mine.js';
import Setting from './code/Mine/components/Setting.js';
import Home from './code/Home/Components/Home.js'
import TongxingCompany from './code/Home/Components/TongxingCompany.js';
import TongxingPerson from './code/Home/Components/TongxingPerson.js';
class TabBar extends Component{
render(){
// console.warn('aa='+this.props.title);
// console.warn('bb='+this.props.focused);
if (this.props.title==='首页') {
if (this.props.focused) {
return <Image style={{width:22,height:22}} source={require('./code/Tabbar/Images/tabbar_home_selecte.png')}></Image>
}else{
return <Image style={{width:22,height:22}} source={require('./code/Tabbar/Images/tabbar_home.png')}></Image>
}
}else{
if (this.props.focused) {
return <Image style={{width:22,height:22}} source={require('./code/Tabbar/Images/tabbar_mine_selecte.png')}></Image>
}else{
return <Image style={{width:22,height:22}} source={require('./code/Tabbar/Images/tabbar_mine.png')}></Image>
}
}
}
}
export default class App extends Component{
constructor(props){
super(props);
this.state = {
selectScene:'home',
};
}
renderNavRightButton(scenekey,image){
return(
<TouchableHighlight
style={{ alignItems: "center", justifyContent: 'center', height: 40, width: 40 }}
onPress={this.clickRight.bind(this, scenekey)}
underlayColor="#fff">
{image}
</TouchableHighlight>
);
}
clickRight(scenekey){
console.warn('right'+scenekey);
if(scenekey==='mine'){
Actions.push('setting',{'name':'zht'});
}
// if (scenekey==='setting') {
// Setting.doneAction();
// }
}
renderNavLeftButton(scenekey){
return(
<TouchableHighlight
style={{ alignItems: "center", justifyContent: 'center', height: 40, width: 40 }}
onPress={this.backAction.bind(this, scenekey)}
underlayColor="#fff">
<Image style={{ width: 12, height: 19, }} source={require('./code/Common/images/back_arrow.png')}></Image>
</TouchableHighlight>
);
}
backAction(scenekey){
console.warn('left'+scenekey);
Actions.pop();
}
render(){
return(
<Router sceneStyle={{backgroundColor:'white'}}>
<Stack>
<Scene
key='login'
component={Login}
title='账号登录'
titleStyle={{flex:1,textAlign:'center'}}></Scene>
<Scene
key='register'
component={Register}
// title = {this.props.navigation.state.params.name}
title='注册'
titleStyle={{textAlign:'center',flex:1}}
renderRightButton={this.renderNavRightButton.bind(this,'register',<Image style={{width:6,height:12}} source={require('./code/Common/images/arrow.png')}></Image>)}
renderLeftButton={this.renderNavLeftButton.bind(this,'register')}
rightButtonImage
></Scene>
<Scene
key='tongxingcompany'
component={TongxingCompany}
title='公司列表' titleStyle={{flex:1,textAlign:'center'}}
renderLeftButton={this.renderNavLeftButton.bind(this,'tongxingcompany')}
rightButtonImage></Scene>
<Scene
key='tongxingperson'
component={TongxingPerson}
title='同行名单'
titleStyle={{flex:1,textAlign:'center'}}
renderLeftButton={this.renderNavLeftButton.bind(this,'tongxingperson')}
rightButtonImage>
</Scene>
<Scene
key='setting'
ref={(r)=>{this.settingScene=r}}
component={Setting}
title='设置' titleStyle={{flex:1,textAlign:'center'}}
renderLeftButton={this.renderNavLeftButton.bind(this,'setting')}
renderRightButton={this.renderNavRightButton.bind(this,'setting',<Text style={{color:'#F77B4A',fontSize:15,}}>完成</Text>)}></Scene>
//定义tabbar开始
<Scene
key='tabbar'
tabs={true}
hideNavBar={true}
labelStyle={{ fontSize: 10, }}
inactiveTintColor='#999' //非选中状态tabbaritem的文字颜色
activeTintColor='#F77B4A' //选中状态tabbaritem的文字颜色
tabBarStyle={{backgroundColor:'#fff',borderTopColor:'#ddd',borderTopWidth:1}}
>
<Scene key="home" component={Home} title='首页' titleStyle={{flex:1,textAlign:'center'}}
// hideNavBar={true}
icon={TabBar}
tabBarLabel='首页'
></Scene>
<Scene key="mine" component={Mine} title="我的" titleStyle={{flex:1,textAlign:'center'}}
// hideNavBar={true}
icon={TabBar}
tabBarLabel='我的'
renderLeftButton={<View></View>}
renderRightButton={this.renderNavRightButton.bind(this,'mine',<Image style={{width:20,height:20}} source={require('./code/Mine/images/mine_setting.png')}></Image>)}
></Scene>
</Scene>
</Stack>
</Router>
);
}
}
Q1：定义tabbar设置tabbar上item图标的选中和非选中状态
A1:找了好久没有像控制文字颜色inactiveTintColor属性和activeTintColor属性。这里创建了另一个Component->Tabbar。在tabbar中通this.props.title判断哪个scene，通过this.props.focused判断是否选中，从而返回不同的<Image></Image>来实现
Q2：自定义返回按钮
A2: 自带的返回按钮效果比较不好，项目中一般不会采用，所以需要自定义。我使用的是renderLeftButton属性，我试过其他的，发现onLeft 没法触发，所以用了renderLeftButton属性返回一个TouchableHighlight，并将scenekey传入来区分是那个页面点击的返回按钮来进行不同的pop操作(pop到上一个页面||pop到指定页面)。
renderNavLeftButton(scenekey){
return(
<TouchableHighlight
style={{ alignItems: "center", justifyContent: 'center', height: 40, width: 40 }}
onPress={this.backAction.bind(this, scenekey)}
underlayColor="#fff">
<Image style={{ width: 12, height: 19, }} source={require('./code/Common/images/back_arrow.png')}></Image>
</TouchableHighlight>
);
}
backAction(scenekey){
console.warn('left'+scenekey);
Actions.pop();
}
同理也可以自定义右侧按钮。
Q3：安卓设备上title不居中（ios不存在这样的问题就）
A3： 给Scene设置属性titleStyle={{flex:1,textAlign:'center'}}，当左侧有按钮时安卓也没有严格居中，原因是左侧按钮占据了一部分空间，解决方法是添加rightButtonImage属性,如下
<Scene
key='tongxingperson'
component={TongxingPerson}
title='同行名单'
titleStyle={{flex:1,textAlign:'center'}}
renderLeftButton={this.renderNavLeftButton.bind(this,'tongxingperson')}
rightButtonImage>
</Scene>
Q4：动态设置页面的title
A4：需求中有时候页面的title不是固定的，需要根据上个页面传入的数据而定。这是react-native-router-flux就有点弱鸡了。需要在具体的页面中使用navigationOptions,从参数navigation中获取到上个页面传入的参数。navigation.state.params包含了页面直接的参数。
注意：这里不能直接用this.props.title去访问参入的参数，因为这个是静态方法
static navigationOptions = ({ navigation, screenProps }) =>({
title: navigation.state.params.title, //
headerLeft:(
<TouchableHighlight
style={{ alignItems: "center", justifyContent: 'center', height: 40, width: 40 }}
onPress={()=>{Actions.pop()}}
underlayColor="#fff">
<Image style={{ width: 12, height: 19, }} source={require('../../Common/images/back_arrow.png')}></Image>
</TouchableHighlight>
),
headerRight:(
<TouchableHighlight
style={{ alignItems: "center", justifyContent: 'center', height: 40, width: 40 }}
onPress={()=>{Setting.doneAction(navigation)}} //这里只能调用类方法
underlayColor="#fff">
<Text style={{color:'#F77B4A',fontSize:15,}}>完成</Text>
</TouchableHighlight>
),
});
进入页面时
Actions.tongxingperson({companyId:item.id.toString(),title:'我是标题'})
Q5：Q4中的点击右侧按钮只能调用类方法，但是在类方法中又如何访问this.state中的数据呢？（谁有更好的方法可以告诉我。）
A5：通过this.props.navigation.setParams({company:text})把数据先存储到navigation.state.params中，在类方法中再获取。
存储
<TextInput
style={{fontSize:15,color:'#333',position:'absolute',left:90,height:'100%',width:180}}
placeholderTextColor='#ccc'
placeholder={placeholder}
onChangeText={(text)=>this.setState({company:text},()=>{this.props.navigation.setParams({company:text})})}
>{this.state.company}</TextInput>
获取
static doneAction=(navigation)=>{
navigation.state.params.company;
}
网友评论