react-native-router-flux使用中的小问题和解决办法。

项目中用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;
}