我正在尝试使用 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将右键添加到导航栏。
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 中，一般导航信息是在类级别中访问的。由于上下文是静态的，因此无法访问我们的组件方法及其参数。为了使它工作，需要一些解决方法。
因此，首先您需要定义将处理您的触摸的函数，在本例中为 handleIconTouch。在这里，您应该定义按钮被按下时将执行的操作。由于此功能不是静态的，您可以从此处访问道具和状态，从而为您提供更多功能和选项。
然后，在您的componentWillMount()方法中，使用setParams()将该方法添加到导航参数，以便在导航选项的静态上下文中可用。由于此方法也不是静态的，因此您可以在此处将任何必需的参数传递给您的按钮。
最后，使用参数，使用最适合您的组件在 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'} />
//注册组件
export default class SignUp extends Component {
componentWillMount() {
this.props.navigation.setParams({
'onRight': this.handleIconTouch
})
}
handleIconTouch() {
debugger;
}
render() {
return ();
}
}
2021 年更新：
这将删除弃用警告。
HomePage.navigationOptions = () => {
return {
headerRight: () => (
<TouchableOpacity onPress={() => navigation.navigate('Create')}>
<Feather name="plus" size={30} />
</TouchableOpacity>
) };
};
这Feather是一个在应用程序中显示图标的库，它在 Expo 中可用。
您可以通过如下方式导入该库来使用它。
import { Feather } from '@expo/vector-icons'
你应该创建一个自定义导航栏看看这个问题在 github custom navBar