如何使用react-native-router-flux在导航栏中制作右键？

Question

我正在使用react-native-router-flux来导航导航栏上的右键。

我的代码是

import React from 'React'; 
import { TouchableHighlight } from 'react-native'; 
import { Scene, Router, Actions } from 'react-native-router-flux'; 
... 
const filterIcon =() => (
<TouchableHighlight onPress={()=>} style={{...}}> 
<Icon name="filter" size={30}/> 
</TouchableHighlight> 
); 
const MainRounter=()=>(
<Router> 
<Scene 
key="main" 
component={mainPage} 
initial={true} 
renderRightButton={()=>filterIcon} 
/> 
</Router> 
); 

但我不能显示导航栏上右键。 我该怎么做？

Answer 1

可以使用onRight，rightTitle或rightButtonImage向右按钮添加到导航栏。

const MainRounter = return (
    <Router> 
     <Scene 
      key="main" 
      component={mainPage} 
      initial={true} 
      onRight={()=> whatever you want to do } 
      rightButtonImage={require('path/to/your/icon')} 
     /> 
    </Router> 
); 

让我知道它的工作:)

Answer 2

你应该创建一个自定义导航栏来看看这个问题在github上custom navBar

Answer 3

更新 - 2017年10月18日

下面描述的方法已经停止工作，再最后版本。所以，我为这最后的解决方案是：

class MyAwesomeClass extends React.Component { 


    componentWillMount() { 
     Actions.refresh({ right: this._renderRightButton }); 
    } 

    _renderRightButton =() => { 
     return(
      <TouchableOpacity onPress={() => this._handleIconTouch() } > 
       <Icon name="check" size={26} color='grey' /> 
      </TouchableOpacity> 
     ); 
    }; 

    _handleIconTouch =() => { 
     console.log('Touched!'); 
    } 

} 

更新 - 2017年8月7日

由于RNRF4使用现在ReactNavigation导航解决方案，上述方案停止工作。为了再次使用它，我直接使用ReactNavigation API。这是我的解决方案：

class MyAwesomeClass extends React.Component { 
    static navigationOptions = ({ navigation }) => { 
     headerRight: <TouchableIcon size={22} name="search" onPress={() =>  
         navigation.state.params.handleIconTouch()} />, 
    } 

    componentWillMount() { 
     this.props.navigation.setParams({ handleIconTouch: 
       this.handleIconTouch }); 

    } 

    handleIconTouch =() => { 
     console.log('Touched!'); 
    } 

} 

在navigationOptions中，通用导航信息在类级别中加以说明。由于上下文是静态的，因此不可能访问我们的组件方法及其参数。为了使它工作一点点的解决方法是必要的。

所以，首先你需要定义处理触摸的函数，在这个例子中是handleIconTouch。在这里你应该定义你的按钮在按下时会执行的动作。由于此功能不是静态的，您可以从这里访问道具和状态，从而为您提供更多功能和选项。

然后，在你componentWillMount（）方法与setParams（）获取可用在navigationOptions的静态上下文的方法添加到导航PARAMS。由于这个方法不是静态的，你可以在这里传递任何所需的参数到你的按钮。

最后，使用参数，使用最适合您的组件在navigationOptions/headerRight键中定义按钮。

ORIGINAL 我建议你这种方法：

1. 与你期望的逻辑和图像创建方法，例如：

   renderRightButton =() => { 
       return(
        <TouchableOpacity onPress={() => null } > 
         <Icon name="check" size={26} color='grey' /> 
        </TouchableOpacity> 
       ); 
   }; 
   

2. 在你componentWillMount（）方法中添加的开始：

   Actions.refresh({ renderRightButton: this.renderRightButton });

3. 准备好了！

如果您有任何疑问，请告诉我。

Answer 4

对于RNRF4。谢谢Jacse。

import React from 'react'; 
 
import { View, Button, Alert } from 'react-native'; 
 

 
class MyScreen extends React.Component { 
 
    static navigationOptions = ({ navigation }) => { 
 
     const { params = {} } = navigation.state; 
 
     return { 
 
     headerRight: <Button title="Save" onPress={() => params.handleSave()} /> 
 
     }; 
 
    }; 
 

 
    _saveDetails() { 
 
     Alert.alert('clicked save'); 
 
    } 
 

 
    componentDidMount() { 
 
     this.props.navigation.setParams({ handleSave: this._saveDetails }); 
 
    } 
 

 
    render() { 
 
     return (
 
     <View /> 
 
    ); 
 
    } 
 
} 
 
export default MyScreen;

Answer 5

RNRF4我想这个代码工作正常

<Scene 
     key="SignUp" 
     component={SignUp} 
     title="SignUp" 
     onRight={()=>{}} 
     rightTitle={' Save'} /> 

//注册组件

export default class SignUp extends Component { 
    componentWillMount() { 
     this.props.navigation.setParams({ 
      'onRight': this.handleIconTouch 
     }) 
    } 

    handleIconTouch() { 
     debugger; 
    } 

    render() { 
     return(); 
    } 
}