React Native中route.params的input为null时应用崩溃如何修复？

崩溃触发有两个核心原因：

1. 直接刷新进入IznajmiScreen页面时，没有从输入页传递参数，route.params本身为undefined，解构input时会直接抛出取值错误
2. 就算route.params存在，若未传递input字段或者input值为null/undefined，React Native的Text组件不支持直接渲染空值，会触发渲染错误

你可以按优先级选择以下任意一种或者组合使用，均可解决崩溃问题：

1. 接收参数时增加兜底逻辑（最便捷，推荐） #

修改IznajmiScreen的参数解构代码，给route.params和input都加默认值，保证拿到的永远是合法字符串：

export const IznajmiScreen = ({navigation, route}) => {
  // 第一层兜底：如果params不存在就默认为空对象，第二层兜底：input不存在就默认为空字符串
  const { input = '' } = route.params || {};
  
  return (
    <>
    <SectionContainer>
      <Text>{input}</Text>
    </SectionContainer>
    </>
  );
};

如果担心还有特殊情况，也可以在渲染时再加一层兜底：

<Text>{input ?? ''}</Text>

2. 路由配置时加初始参数（从源头避免参数缺失） #

如果你用的是React Navigation，在定义IznajmiScreen对应的路由时，添加initialParams配置，默认传入空的input值：

<Stack.Screen 
  name="Rent a car" 
  component={IznajmiScreen} 
  // 配置初始参数，不管从什么路径进入页面都有默认参数
  initialParams={{ input: '' }} 
/>

配置后不需要修改原有页面代码，route.params永远存在，input默认是空字符串，不会出现取值错误。

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