React Native：如何在应用中显示Firestore布尔值

首先，我得先指出你代码里的一个小问题：在useEffect遍历Firestore集合时，你每次循环都直接覆盖单个状态变量（比如setName、setBarisan），这会导致最后只有集合里最后一个文档的数据被保留下来。如果你的PARLIMEN集合里有多个文档，应该把所有数据存到voteLists数组里统一管理；如果只是要获取单个特定文档，直接用db.collection('PARLIMEN').doc('你的文档ID').get()会更高效。

接下来解决布尔值展示的核心问题——直接显示true/false确实不够直观，我们可以把布尔值转换成更友好的视觉元素，比如勾选/叉号图标、自定义文本，甚至是开关组件。这里给你两种常见的实现方式：

方式1：用图标/文本替换布尔值 #

先写一个辅助函数，把布尔值映射成你想要的显示内容：

const renderBooleanValue = (value) => {
  // 可以替换成react-native-vector-icons的图标，或者自定义文本
  return value ? 
    <Text style={{color: 'green', fontSize:20, textAlign:'center', marginVertical: 4}}>✅ 已选择</Text> : 
    <Text style={{color: 'red', fontSize:20, textAlign:'center', marginVertical: 4}}>❌ 未选择</Text>;
};

然后修正useEffect的逻辑（这里假设你要获取单个特定文档，多文档的话可以把数据push到数组后存到voteLists）：

useEffect(()=>{ 
  // 替换成你目标文档的ID
  db.collection('PARLIMEN').doc('target-document-id').get()
    .then(snap=>{ 
      const data = snap.data();
      setName(data.name); 
      setNric(data.nric); 
      setBarisan(data.barisan); 
      setPkr(data.pkr); 
      setDap(data.dap); 
      setPas(data.pas); 
    })
    .catch(err => {
      setErrorMessage('加载数据失败：' + err.message);
    })
},[]); 

最后在渲染部分用辅助函数替换直接显示布尔值：

return( 
  <View> 
    <View style={{padding:20}} > 
      <Text style={{fontSize:20, textAlign:'center', color:"black", marginVertical: 4}}>{name}</Text> 
      <Text style={{fontSize:20, textAlign:'center', color:"black", marginVertical: 4}}>{nric}</Text> 
      {renderBooleanValue(barisan)}
      {renderBooleanValue(pkr)}
      {renderBooleanValue(dap)}
      {renderBooleanValue(pas)}
      {errorMessage && <Text style={{color: 'red', textAlign:'center', marginTop: 10}}>{errorMessage}</Text>}
    </View> 
  </View>
)

方式2：用Switch组件展示布尔状态（适合需要直观状态标识的场景） #

如果你希望用户能更清晰看到布尔状态（甚至后续需要交互修改），可以用React Native内置的Switch组件：

// 渲染部分替换为：
<View style={{alignItems: 'center', marginVertical: 8}}>
  <Text style={{fontSize:20, color:"black", marginBottom: 4}}>Barisan</Text>
  <Switch value={barisan} disabled={true} /> {/* disabled设为true就只能查看不能修改 */}
</View>
<View style={{alignItems: 'center', marginVertical: 8}}>
  <Text style={{fontSize:20, color:"black", marginBottom: 4}}>PKR</Text>
  <Switch value={pkr} disabled={true} />
</View>
{/* 其他布尔字段同理 */}

另外，我给代码加了错误捕获逻辑，这样如果Firestore请求出问题，用户能看到明确的错误提示。

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