React本地路由器Flux - rightButtonIconStyle

Question

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

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

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