React Native随机柱状图在Expo崩溃但Chrome正常问题求助

1. React Native 样式不支持 px 单位 #

React Native 的样式系统默认使用密度无关像素（dp），不需要添加 px 后缀。你在样式中写了 height: ${value}px``，Web 环境（Chrome）可以兼容这种写法，但 Expo 打包后的原生环境无法解析该格式，会直接导致样式解析错误甚至应用崩溃。

修复方法：
直接使用数字作为 height 值，移除 px 后缀：

style={{
  height: value, // 去掉 px 后缀
  marginLeft: 2,
  marginRight: 2,
  width: 10,
  backgroundColor: "blue",
  // 注：fontSize 对 View 组件无效，仅 Text 组件需要设置该属性
}}

2. 生成不重复随机数的逻辑存在死循环风险 #

你的 newArray 函数通过 while 循环生成不重复随机数，但随机数范围仅为 1-200。如果后续 len 的值超过 200，循环会因无法找到新的不重复值而无限执行，直接导致应用卡死。虽然当前 len=20 不会触发，但这是一个潜在隐患。

优化方法：
如果不需要严格不重复，可直接去掉去重逻辑；若必须保证不重复，改用洗牌算法更高效：

const newArray = () => {
  // 先创建 1-200 的有序数组
  const tempArray = Array.from({ length: 200 }, (_, i) => i + 1);
  // Fisher-Yates 洗牌算法打乱数组
  for (let i = tempArray.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [tempArray[i], tempArray[j]] = [tempArray[j], tempArray[i]];
  }
  // 截取前 len 个元素
  setBars(tempArray.slice(0, len));
};

3. 重复使用相同的 key（需规范） #

在 map 循环中，外层 View 和内层 View 都使用了 key={idx}，虽然不会直接导致崩溃，但违反 React 的 key 使用规范，可能引发渲染异常。建议仅在最外层循环元素上设置唯一 key：

{bars.map((value, idx) => (
  <View key={idx}>
    <View
      style={{
        height: value,
        marginLeft: 2,
        marginRight: 2,
        width: 10,
        backgroundColor: "blue",
      }}
    ></View>
  </View>
))}

4. 确保 bars 初始状态为数组 #

如果 bars 的初始状态是 undefined 或 null，组件首次渲染时执行 bars.map 会抛出错误，导致崩溃。需初始化时设置为空数组：

const [bars, setBars] = useState([]);

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