在React Native中查看换行文本标记抱怨文本字符串

Question

我在组件中有这段代码，但问题是当我删除外部View时，RN会抱怨Invariant Violation: Text strings must be rendered within a component..。好吧，我将文本包装在一个view和text标记中。为什么会出现错误。下面的代码片段运行良好，当外部视图关闭时会出现错误。

<View>
    {
        badgeCount > 0 && (<View style={{
                position: 'absolute',
                right: -6,
                top: -3,
                backgroundColor: 'red',
                borderRadius: 6,
                width: 12,
                height: 12,
                justifyContent: 'center',
                alignItems: 'center'
            }}>
            <Text style={{
                    color: 'white',
                    fontSize: 10,
                    fontWeight: 'bold'
                }}>
                {badgeCount}
            </Text>
        </View>)
    }
</View>

全渲染方法-

render() {
    const {name, badgeCount, color, size} = this.props;
    return (<View style={{
            width: 24,
            height: 24,
            margin: 5
        }}>
        <Ionicons name={name} size={size} color={color}/> {
            badgeCount > 0 && (<View style={{
                    position: 'absolute',
                    right: -6,
                    top: -3,
                    backgroundColor: 'red',
                    borderRadius: 6,
                    width: 12,
                    height: 12,
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                <Text style={{
                        color: 'white',
                        fontSize: 10,
                        fontWeight: 'bold'
                    }}>
                    {badgeCount}
                </Text>
            </View>)
        }

    </View>);
}

Answer 1

在render方法中，如果我们必须根据一个条件来渲染一些东西，那么我们使用花括号来添加条件。

render(){
  return (
      <View>
       {toShowText &&
       <Text>Hello viewing</View>
       }
      </View>
   )}

在您的示例中，当您移除外部视图时，curly braces.Render方法将其视为任何文本，并强制您在component.That中换行。这就是为什么要使用条件呈现，您必须在视图容器中用大括号换行