React Native Router Flux - rightButtonIconStyle

Question

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

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

Answer 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}/>