Question

我试图根据导航参数有条件地渲染headerRight。我目前正在静态navigationOptions中尝试这个。这是我的代码，但没有任何东西呈现在屏幕上

static navigationOptions = ({navigation}) => ({
headerRight : () => {
  if (navigation.state.params.user.following) {
    return (
        <TouchableOpacity
          onPress={() => this.followUser()}>
          <Icon2 name="ios-person-add-outline" size={35} />
        </TouchableOpacity>
    )}  else {
    return (
          <TouchableOpacity
            onPress={() => this.unfollowUser()}>
            <Icon name="user-times" size={20} />
          </TouchableOpacity>
        )}
    },
})

可以这样做还是我需要在这里使用自定义标题？

非常感谢任何帮助！谢谢！

解决方案：

删除匿名函数并实现soutot

推荐的条件语法

static navigationOptions = ({navigation}) => ({
  headerRight :  navigation.state.params.otherUser.following ?
    ( <TouchableOpacity
         onPress={() => this.followUser()}>
         <Icon2 name="ios-person-add-outline" size={35} />
      </TouchableOpacity> )
    :
    ( <TouchableOpacity
         onPress={() => this.unfollowUser()}>
         <Icon name="user-times" size={20} />
      </TouchableOpacity> )
    })

Answer 1

您在'else'语句后使用逗号（，）。你也可以试试这样的东西

return(
navigation.state.params.user.following ?
<TouchableOpacity
  onPress={() => this.followUser()}>
  <Icon2 name="ios-person-add-outline" size={35} />
</TouchableOpacity>
:
<TouchableOpacity
  onPress={() => this.unfollowUser()}>
  <Icon name="user-times" size={20} />
</TouchableOpacity>
);

有关条件渲染的详细信息，请查看以下文档： https://facebook.github.io/react/docs/conditional-rendering.html

https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator

希望有所帮助

如何在react本机堆栈导航头中有条件地呈现？

1 个答案: