react-native-router-flux使用中的小問題和解決辦法。

項目中用app.js去承載路由，然后通過路由管理頁面跳轉(zhuǎn)。

'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='設(shè)置' 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'  //非選中狀態(tài)tabbaritem的文字顏色
                  activeTintColor='#F77B4A' //選中狀態(tài)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設(shè)置tabbar上item圖標的選中和非選中狀態(tài)
A1:找了好久沒有像控制文字顏色inactiveTintColor屬性和activeTintColor屬性。這里創(chuàng)建了另一個Component->Tabbar。在tabbar中通this.props.title判斷哪個scene，通過this.props.focused判斷是否選中，從而返回不同的<Image></Image>來實現(xiàn)

Q2：自定義返回按鈕
A2: 自帶的返回按鈕效果比較不好，項目中一般不會采用，所以需要自定義。我使用的是renderLeftButton屬性，我試過其他的，發(fā)現(xiàn)onLeft 沒法觸發(fā)，所以用了renderLeftButton屬性返回一個TouchableHighlight，并將scenekey傳入來區(qū)分是那個頁面點擊的返回按鈕來進行不同的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();
 }

同理也可以自定義右側(cè)按鈕。

Q3：安卓設(shè)備上title不居中（ios不存在這樣的問題就）
A3： 給Scene設(shè)置屬性titleStyle={{flex:1,textAlign:'center'}}，當(dāng)左側(cè)有按鈕時安卓也沒有嚴格居中，原因是左側(cè)按鈕占據(jù)了一部分空間，解決方法是添加rightButtonImage屬性,如下

<Scene 
      key='tongxingperson' 
      component={TongxingPerson} 
      title='同行名單' 
      titleStyle={{flex:1,textAlign:'center'}}
      renderLeftButton={this.renderNavLeftButton.bind(this,'tongxingperson')}
      rightButtonImage>
      </Scene>

Q4：動態(tài)設(shè)置頁面的title
A4：需求中有時候頁面的title不是固定的，需要根據(jù)上個頁面?zhèn)魅氲臄?shù)據(jù)而定。這是react-native-router-flux就有點弱雞了。需要在具體的頁面中使用navigationOptions,從參數(shù)navigation中獲取到上個頁面?zhèn)魅氲膮?shù)。navigation.state.params包含了頁面直接的參數(shù)。

注意：這里不能直接用this.props.title去訪問參入的參數(shù)，因為這個是靜態(tài)方法
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)}} //這里只能調(diào)用類方法
                underlayColor="#fff">
                <Text style={{color:'#F77B4A',fontSize:15,}}>完成</Text>
            </TouchableHighlight>
        ),
    });

進入頁面時

Actions.tongxingperson({companyId:item.id.toString(),title:'我是標題'})

Q5：Q4中的點擊右側(cè)按鈕只能調(diào)用類方法，但是在類方法中又如何訪問this.state中的數(shù)據(jù)呢？（誰有更好的方法可以告訴我。）
A5：通過this.props.navigation.setParams({company:text})把數(shù)據(jù)先存儲到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;
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容