意外的令牌，预期的，错误（反应导航）答案

【问题标题】：Unexpected token, expected , error (React-navigation)意外的令牌，预期的，错误（反应导航）
【发布时间】：2018-04-01 07:03:17
【问题描述】：

如果收到outfitDetail 道具，我将在标题标题处呈现用户的图像和用户名。

class OutfitDetail extends Component {
  static navigationOptions = ({navigation, screenProps}) => ({
    ...
    headerTitle: (
      !!screenProps.outfitDetail ? (
            <View style={styles.container}>
              <TouchableOpacity onPress={() => this.props.navigation.navigate('Profile', {id: userId})}>
                {this._renderAvatar(screenProps.outfitDetail.user.image)}
              </TouchableOpacity>
              <View style={styles.content}>
                <View style={styles.contentHeader}>
                  <RkText rkType='header5'>{screenProps.outfitDetail.user.username}</RkText>
                  <RkText rkType='secondary4 hintColor'>
                    <TimeAgo time={screenProps.outfitDetail.publish}/>
                  </RkText>
                </View>
                <RkText rkType='primary3 mediumLine'>{screenProps.outfitDetail.content}</RkText>
              </View>
            </View>
      ): (<Text>Loading</Text>)
    ),
    ...
  });

所以如果 screenProps.outfitDetail 不为 null（尚未获取），则渲染 Loading，否则渲染用户的照片和用户名。

为什么我收到Unexpected token, expected , error (React-navigation)？错误发生在上面的第三行代码。

【问题讨论】：

将 Loading 之前的 ',' 替换为 ':' 并可能像这样用 (<Text>Loading</Text>) 括起来
感谢您的评论。但它仍然在第三行抛出错误
你是对的！我也错过了
最后一行也缺少}，所以结尾是})},
刚刚编辑了问题的最后一行。我没有把整个代码放在这里。嗯，我认为我在第三行出现错误，因为我应该将整个代码放在一行中？

标签： reactjs react-native react-redux react-navigation

【解决方案1】：

static navigationOptions = ({navigation, screenProps}) => ({
headerTitle: (
    !!screenProps.outfitDetail ? (
        <View style={styles.container}>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('Profile', {id: userId})}>
            {this._renderAvatar(screenProps.outfitDetail.user.image)}
          </TouchableOpacity>
          <View style={styles.content}>
            <View style={styles.contentHeader}>
              <RkText rkType='header5'>{screenProps.outfitDetail.user.username}</RkText>
              <RkText rkType='secondary4 hintColor'>
                <TimeAgo time={screenProps.outfitDetail.publish}/>
              </RkText>
            </View>
            <RkText rkType='primary3 mediumLine'>{screenProps.outfitDetail.content}</RkText>
          </View>
        </View>
  ):(<Text>Loading</Text>)
),
... other functions ...
})

【讨论】：

好的。不是它只是抛出了错误。但它会抛出 screenProps.outfitDetail.user is undefined.
虽然省略{}括号，但我认为如果条件语句不能正常工作。
您正在检查是否完全不为空，而 suitDetail 可以是未定义的。我又更新了答案
非常接近。我试过! 和!!。使用!，它给了我一个错误（未定义）。使用!!，它总是渲染Loading。
当我测试 this.props.outfitDetail 时，它会在我的控制台上打印 { blah blah} 或 null。