React native 加载组件时,如果满足条件,如何在标题中添加按钮?
我的React原生(0.59)应用程序使用React导航(3.11)作为路由机制。在React native 加载组件时,如果满足条件,如何在标题中添加按钮?,react-native,react-navigation,React Native,React Navigation,我的React原生(0.59)应用程序使用React导航(3.11)作为路由机制。在App.js中创建GroupStack,如下所示: const GroupStack = createStackNavigator({ Group: { screen: GroupWithSelf, navigationOptions: ({navigation}) => { return { title: 'Group', headerRig
App.js
中创建GroupStack
,如下所示:
const GroupStack = createStackNavigator({
Group: {
screen: GroupWithSelf,
navigationOptions: ({navigation}) => {
return {
title: 'Group',
headerRight: (
<TouchableOpacity>
<Icon
name="plus"
size={30}
//color={}
type='octicon'
onPress={() => navigation.navigate("NewGroup")}
/>
</TouchableOpacity>
),
}}
},
NewGroup: {
screen: NewGroupWithSelf,
navigationOptions: {
title: 'New Group',
},
},
RemoveGroup: {
screen: RemoveGroupWithSelf,
navigationOptions: {
title: 'Remove Group',
},
},
Groupmember: {
screen: GroupmemberWithSelf,
navigationOptions: ({navigation}) => {
return {
title: 'Group Member',
}}
},
NewGroupmember: {screen: NewGroupmemberWithSelf},
RemoveGroupmember: {screen:RemoveGroupWithSelf},
});
问题是在加载组成员时,没有添加+
,并且忽略了静态导航选项
。我理解,如果我将此导航选项
添加到组堆栈
定义中,则无论何时加载组成员
,都会显示+
符号。但这不是我想要的。加载组成员时,如果用户是管理员
,则添加+
。我如何做到这一点 您可以做的是:
在标题中添加一个按钮,并在何时向用户显示该按钮中添加一个条件。请尝试在函数中呈现该按钮,如showButton=()=>{}
它可能是这样的:load===true&&this.showButton()
我尝试将静态导航选项
从组件移动到App.js中的GroupStack
。。并且+
显示成功。单击+
后,应用程序确实进入了NewGroupmember
组件。但问题是,paramsgroup_id
未定义且未传入。加载组件时,group\u id
的值存在,定义GroupStack
时,group\u id
没有值。。您是否有建议执行的代码示例?使用逻辑将navigtionOptions移动到GroupStack,以控制按钮的隐藏/显示。还可以像在组件中一样传递参数。到目前为止,这是可行的。
export default class Groupmember extends React.Component {
static navigationOptions = ({navigation}) => {
if (this.props.navigation.state.params.role === "admin") {
return {
headerRight: (
<TouchableOpacity>
<Icon
name="plus"
size={30}
//color={}
type='octicon'
onPress={() => navigation.navigate("NewGroupmember", {group_id: this.props.navigation.state.params.group_id})}
/>
</TouchableOpacity>
),
}
};
};
....