项目中用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
}else{
return
}
}else{
if (this.props.focused) {
return
}else{
return
}
}
}
}
export default class App extends Component{
constructor(props){
super(props);
this.state = {
selectScene:'home',
};
}
renderNavRightButton(scenekey,image){
return(
{image}
);
}
clickRight(scenekey){
console.warn('right'+scenekey);
if(scenekey==='mine'){
Actions.push('setting',{'name':'zht'});
}
// if (scenekey==='setting') {
// Setting.doneAction();
// }
}
renderNavLeftButton(scenekey){
return(
);
}
backAction(scenekey){
console.warn('left'+scenekey);
Actions.pop();
}
render(){
return(
)}
renderLeftButton={this.renderNavLeftButton.bind(this,'register')}
rightButtonImage
>
{this.settingScene=r}}
component={Setting}
title='设置' titleStyle={{flex:1,textAlign:'center'}}
renderLeftButton={this.renderNavLeftButton.bind(this,'setting')}
renderRightButton={this.renderNavRightButton.bind(this,'setting',完成 )}>
//定义tabbar开始
}
renderRightButton={this.renderNavRightButton.bind(this,'mine',)}
>
);
}
}
Q1:定义tabbar设置tabbar上item图标的选中和非选中状态
A1:找了好久没有像控制文字颜色inactiveTintColor属性和activeTintColor属性。这里创建了另一个Component->Tabbar。在tabbar中通this.props.title判断哪个scene,通过this.props.focused判断是否选中,从而返回不同的来实现
Q2:自定义返回按钮
A2: 自带的返回按钮效果比较不好,项目中一般不会采用,所以需要自定义。我使用的是renderLeftButton属性,我试过其他的,发现onLeft 没法触发,所以用了renderLeftButton属性返回一个TouchableHighlight,并将scenekey传入来区分是那个页面点击的返回按钮来进行不同的pop操作(pop到上一个页面||pop到指定页面)。
renderNavLeftButton(scenekey){
return(
);
}
backAction(scenekey){
console.warn('left'+scenekey);
Actions.pop();
}
同理也可以自定义右侧按钮。
Q3:安卓设备上title不居中(ios不存在这样的问题就)
A3: 给Scene设置属性titleStyle={{flex:1,textAlign:'center'}},当左侧有按钮时安卓也没有严格居中,原因是左侧按钮占据了一部分空间,解决方法是添加rightButtonImage属性,如下
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:(
{Actions.pop()}}
underlayColor="#fff">
),
headerRight:(
{Setting.doneAction(navigation)}} //这里只能调用类方法
underlayColor="#fff">
完成
),
});
进入页面时
Actions.tongxingperson({companyId:item.id.toString(),title:'我是标题'})
Q5:Q4中的点击右侧按钮只能调用类方法,但是在类方法中又如何访问this.state中的数据呢?(谁有更好的方法可以告诉我。)
A5:通过this.props.navigation.setParams({company:text})把数据先存储到navigation.state.params中,在类方法中再获取。
存储
this.setState({company:text},()=>{this.props.navigation.setParams({company:text})})}
>{this.state.company}
获取
static doneAction=(navigation)=>{
navigation.state.params.company;
}