React Native Router Flux - rightButtonIconStyle答案

【问题标题】：React Native Router Flux - rightButtonIconStyleReact Native Router Flux - rightButtonIconStyle
【发布时间】：2017-09-23 09:40:29
【问题描述】：

我的 rightIconImage 在导航栏中的容器中居中。我希望它与右手边齐平。（见图）

我尝试将道具rightButtonIconStyle={{ justifyContent: 'flex-end' }} 添加到场景中，但这没有任何效果。我在 API 中找不到关于如何更改 rightButtonIconStyle 而不直接硬编码的任何地方。

【问题讨论】：

标签： react-native react-native-router-flux

【解决方案1】：

如果您将单独的代码写入单独的文件会更好，以避免将来混淆，只需创建另一个文件，如下所示

  import React, {Component} from 'react';
import {Text, View,Image,TouchableOpacity} from 'react-native';
const theme = require('../theme/index.js');
import {Actions} from 'react-native-router-flux';
const iconFilter=require('../assets/Images/filter.png')
const iconLocation=require('../assets/Images/location.png')
class HeaderMenuResultListView extends Component{
  _gotoAdvanceFilterPage(){
    Actions.AdvanceFilterMapList();
  }
  _gotoMapSearchView(){
    Actions.MapSearchView()
  }
  render(){
    return(
      <View style={styles.container}>

        <View>
          <TouchableOpacity onPress={()=>{this._gotoAdvanceFilterPage()}}>
            <Image source={iconFilter} style={styles.iconFilter}/>
          </TouchableOpacity>
        </View>
        <Text style={styles.circleAboveFilter}></Text>
        <TouchableOpacity onPress={()=>{this._gotoMapSearchView()}}>
          <Image source={iconLocation} style={styles.iconMap}/>
        </TouchableOpacity>
      </View>
    )
  }
}
const styles = {
  container: {
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center'

  },
  iconMap:{
    height:24,
    width:24,
    marginRight:16,

  },
  iconFilter:{
    height:24,
    width:24,

  },
  circleAboveFilter:{
    width: 10,
    height: 10,
    borderRadius: 44/2,
    backgroundColor:theme.purplyPink,
    alignItems:'flex-end',marginBottom:20,
    marginRight:16,

  }
}
export default HeaderMenuResultListView;

将上述文件导入您的路由文件并将其调用到您的场景中

  <Scene key="Home"
                  renderRightButton={<HeaderMenuResultListView/>}
                  component={Home} title="Results" panHandlers={null}/>

【讨论】：