Expo构建Android应用后点击切换组件报空指针异常求助

问题描述 #

开发的点击切换组件在Expo Go中运行正常，但打包构建Android应用后出现以下错误：

java.lang.NullPointerException: Attempt to invoke interface method 'int com.facebook.react.bridge.ReadableArray.size()' on a null object reference

核心原因 #

这个错误是原生层尝试访问一个预期为数组但实际为null的对象，结合代码来看，主要是空值处理不严谨和导航参数序列化兼容性导致的——Expo Go对非标准兼容的代码容错性更高，但Android构建后的原生环境要求更严格。

具体修复步骤 #

1. 统一严谨的空值判断
   代码中!!props.category.children的判断没有处理props.category为null的情况，直接访问会触发空指针。把所有涉及category属性的判断都改成可选链写法：

   // 原判断
   // if (!!props.category?.children) ...
   // {!!props.category.children && <Svg ... />}
   // 修改后
   if (!!props.category?.children) ...
   {!!props.category?.children && <Svg ... />}
   

2. 确保导航参数可序列化
   传递category对象到导航参数时，要避免传递不可序列化的字段（比如函数、循环引用），只保留需要的基础类型字段：

   // 原导航代码
   navigation.navigate({
     name: "Category",
     params: { category: props.category },
     key: "Category-" + props.category.id,
   });
   // 修改后
   navigation.navigate({
     name: "Category",
     params: { 
       category: {
         id: props.category.id,
         name: props.category.name,
         image: props.category.image,
         children: props.category.children?.map(child => ({
           id: child.id,
           name: child.name
         }))
       } 
     },
     key: "Category-" + props.category.id,
   });
   

3. 优化条件渲染样式
   把动态样式的写法改成更符合React Native规范的方式，提前定义hidden样式：

   // 在styles中添加
   hidden: { display: 'none' }
   
   // 原渲染代码
   <View style={[styles.children, !open && { display: "none" }]}>
   // 修改后
   <View style={open ? styles.children : [styles.children, styles.hidden]}>
   

修改后的完整代码示例 #

const [open, setOpen] = useState(false);
const navigation = useNavigation();

return (
  <>
    <Pressable
      onPress={() => {
        if (!!props.category?.children) setOpen((prevState) => !prevState);
        else {
          // @ts-ignore
          navigation.navigate({
            name: "Category",
            params: { 
              category: {
                id: props.category.id,
                name: props.category.name,
                image: props.category.image
              } 
            },
            key: "Category-" + props.category.id,
          });
        }
      }}
    >
      <View style={styles.categoryItem}>
        <View style={styles.rightView}>
          <View style={styles.imageBox}>
            <Image
              style={styles.image}
              source={{ uri: props.category.image }}
            />
          </View>
          <Text style={styles.title}>{props.category.name}</Text>
        </View>
        {!!props.category?.children && (
          <Svg
            style={[
              styles.arrow,
              open && { transform: [{ rotate: "90deg" }] },
            ]}
            width="20"
            height="20"
            viewBox="0 0 28 28"
            fill="none"
          >
            <Path
              d="M20.1523 14.1445C20.1523 14.4521 20.0381 14.7158 19.792 14.9443L12.9541 21.6416C12.7607 21.835 12.5146 21.9404 12.2246 21.9404C11.6445 21.9404 11.1787 21.4834 11.1787 20.8945C11.1787 20.6045 11.3018 20.3496 11.4951 20.1475L17.6562 14.1445L11.4951 8.1416C11.3018 7.93945 11.1787 7.67578 11.1787 7.39453C11.1787 6.80566 11.6445 6.34863 12.2246 6.34863C12.5146 6.34863 12.7607 6.4541 12.9541 6.64746L19.792 13.3359C20.0381 13.5732 20.1523 13.8369 20.1523 14.1445Z"
              fill="rgba(117, 117, 117, 0.5)"
            />
          </Svg>
        )}
      </View>
    </Pressable>
    <View style={open ? styles.children : [styles.children, styles.hidden]}>
      {props.category.children?.map((child) => (
        <TouchableOpacity
          onPress={() => {
            // @ts-ignore
            navigation.navigate({
              name: "Category",
              params: { 
                category: {
                  id: child.id,
                  name: child.name
                } 
              },
              key: "Category-" + child.id,
            });
          }}
          key={child.id}
          style={styles.child}
        >
          <Text style={styles.childTitle}>{child.name}</Text>
          <View style={styles.underLine}></View>
        </TouchableOpacity>
      ))}
    </View>
  </>
);

内容的提问来源于stack exchange，提问作者Назар Култаев