我正在尝试使用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>
);
但是我无法在导航栏上显示右键。 我该怎么做?
您可以使用onRight
, rightTitle
或rightButtonImage
将右键添加到navBar。
const MainRounter = return (
<Router>
<Scene
key="main"
component={mainPage}
initial={true}
onRight={ ()=> whatever you want to do }
rightButtonImage={require('path/to/your/icon')}
/>
</Router>
);
让我知道它是否有效:)
更新-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中,常规导航信息在类级别访问。 由于上下文是静态的,因此无法访问我们的Component方法及其参数。 为了使其工作,需要一些解决方法。
因此,首先需要定义将处理触摸的函数,在本例中为handleIconTouch。 在这里,您应该定义按钮被按下时将执行的操作。 由于此功能不是静态的,因此您可以从此处访问道具和状态,从而为您提供更多功能和选项。
然后,在您的componentWillMount()方法中,使用setParams()将方法添加到导航参数中,以在navigationOptions的静态上下文中可用。 由于此方法也不是静态的,因此您可以在此处将任何必需的参数传递给按钮。
最后,使用参数,使用最适合您的组件在navigationOptions / headerRight键中定义按钮。
原文我建议您采用这种方法:
创建具有所需逻辑和图像的方法,例如:
renderRightButton = () => { return( <TouchableOpacity onPress={() => null } > <Icon name="check" size={26} color='grey' /> </TouchableOpacity> ); };
在您的componentWillMount()方法的开头添加:
Actions.refresh({ renderRightButton: this.renderRightButton });
准备好出发!
告诉我您是否有任何疑问。
对于RNRF4。 谢谢雅克 。
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;
RNRF4我尝试了这段代码
<Scene
key="SignUp"
component={SignUp}
title="SignUp"
onRight={()=>{}}
rightTitle={' Save'} />
// SignUp组件
export default class SignUp extends Component {
componentWillMount() {
this.props.navigation.setParams({
'onRight': this.handleIconTouch
})
}
handleIconTouch() {
debugger;
}
render() {
return ();
}
}
你应该创建一个自定义导航栏来看看这个问题在github上的自定义导航栏