React Native条件渲染中&&与三元运算符表现差异问题咨询

这个问题和「表达式是否被持续监听」完全无关，&&和?:都是普通的JavaScript表达式，组件每次重渲染时都会重新执行，二者的差异本质是返回值规则不同 + React Native的文本渲染限制共同导致的：

1. 两种表达式的返回值差异 #

• 逻辑与&&的返回规则：如果左侧操作数为假值，直接返回左侧操作数本身，而非固定的布尔值；只有左侧为真值时才返回右侧操作数。
• 三元运算符?:的返回规则：条件为真时返回冒号左侧值，条件为假时返回冒号右侧值，你这里显式指定了假值返回null。

2. React渲染规则的差异 #

React对JSX插值内容的渲染逻辑是：null、undefined、布尔值（true/false）都会被直接忽略，不会渲染任何内容；除此之外的假值（包括空字符串""、数字0、NaN）都会被当成实际内容渲染。
而React Native有强制限制：所有文本内容必须包裹在<Text>组件内，不能直接作为<View>等容器的子节点，哪怕是空字符串也不行。

3. 报错触发场景 #

当你调用navigation.popToTop()时，当前页面会进入销毁流程，路由切换过程中可能触发状态更新，state.sign被重置为空字符串""（属于假值）：

• 旧&&写法：表达式返回空字符串""，相当于直接在容器内渲染未被<Text>包裹的文本，触发React Native原生渲染错误。
• 修改后的三元写法：条件为假时返回null，React直接忽略该节点，无任何内容渲染，因此不会报错。

可选兼容写法 #

如果偏好&&的写法，只要把左侧条件显式转为布尔值即可避免问题，另外注意你示例代码中source属性缺少等号，修正后写法如下：

{!!state.sign && (<Image style={{height:200,width:100}} source={{uri:state.sign}} />)}

此时左侧条件为假时返回的是布尔值false，React会直接忽略，不会触发渲染错误。

内容的提问来源于stack exchange，提问作者Blnk