React Native Navigation参数无法识别问题求助

我有一个基于TypeScript的React Native应用，之前使用Navigation功能正常，但这次跳转至FileViewScreen时，传递的id、filename、file参数全是undefined。

相关代码 #

FileViewScreen 代码 #

export type Props = {
  navigation: PropTypes.func.isRequired;
  id: PropTypes.int.isRequired;
  filename: PropTypes.string.isRequired;
  file: { 
    name: PropTypes.string.isRequired;
    uri: PropTypes.path.isRequired;
    type: PropTypes.mime.isRequired
  };
};

const FileViewScreen: React.FC<Props> = ({navigation, id, filename, file}) => {
  console.log("File View Screen?")
  console.log("currentFile");
  console.log(id)
  console.log(currentFile) // 未定义变量提前打印
  console.log(filename)
  console.log(file)
  const [currentFile, setCurrentFile] = useState(file);
  // ... 其他代码

HomeScreen 跳转触发代码 #

const HomeScreen: React.FC<Props> = ({navigation}) => {
  const [loading, setLoading] = useState(false);
  const [file, setFile] = useState({});
  const [files, setFiles] = useState([]);

  const downloadFile = async () => {
    try {
      // ... 省略其他代码
      const newEntry = {
        name: 'ImageFileName' + Math.random().toString(),
        uri: result.path,
        type: result.mime,
      };
      const res = await addFile(result.path);
      console.log(res)
      navigation.navigate('FileView', { id:1, filename:res, file:newEntry });
    } catch (error) {
      console.log('downloadFile error', error);
    }
  };

  return (
    <View style={styles}>
      <Text>Welcome Home</Text>
      {loading && <ActivityIndicator size={'large'} color="#000" />}
      {!loading && (
        <>
          <Button
            title="Start Recording"
            onPress={downloadFile}
          />
        </>
      )}
    </View>
  );
};

addFile 函数代码 #

export const addFile = file_path => {
  db.transaction(txn => {
    console.log("db transaction")
    console.log(file_path)
    const response = txn.executeSql(
      'INSERT INTO files(file_path,uploaded) VALUES (' +
        file_path +
        ',' +
        false +
        ')',
      (sqlTxn, res) => {
        console.log("adding")
        console.log(`${file_path} video added successfully`);
        return file_path;
      },
      error => {
        console.log('error on adding file ' + error.message);
        return 0;
      },
    );
  });
  console.log(resopnse) // 拼写错误：response
};

App.js 导航配置 #

<NavigationContainer>
  <Stack.Navigator initialRouteName={initalRoute}>
    <Stack.Screen name="Login">
      {props => (
        <LoginScreen {...props} setToken={setUserToken} setUser={setUser} />
      )}
    </Stack.Screen>
    <Stack.Screen name="Home">
        {props => (
          <HomeScreen {...props}/>
        )}
    </Stack.Screen>
    <Stack.Screen name="Register" component={RegisterScreen} />
    <Stack.Screen name="FileView">
      {props =>(
         <FileViewScreen {...props} />
         )}
    </Stack.Screen>
</NavigationContainer>

已尝试的解决方法 #

• 修改App.js中FileViewScreen的传参方式
• 单独传递id、filename或file单个参数
• 使用useState接收参数以应对延迟传递情况

尚未尝试的操作 #

• 将跳转逻辑移出按钮点击事件，不确定navigation.navigate是否仅支持点击触发场景

解决方案 #

1. 导航参数获取方式错误 #

React Navigation中，navigate传递的参数不会直接作为组件props传入，而是存储在route.params中。你直接解构props中的参数自然会拿到undefined。

修改FileViewScreen代码：

// 更新Props类型，加入route参数
export type FileType = {
  name: string;
  uri: string;
  type: string;
};

export type Props = {
  navigation: any; // 推荐导入React Navigation的NavigationProp类型做严格校验
  route: {
    params: {
      id: number;
      filename: string;
      file: FileType;
    };
  };
};

const FileViewScreen: React.FC<Props> = ({navigation, route}) => {
  // 从route.params中正确取出参数
  const { id, filename, file } = route.params;
  
  console.log("File View Screen?")
  console.log(id)
  console.log(filename)
  console.log(file)
  const [currentFile, setCurrentFile] = useState(file);
  // ... 其他代码

2. addFile函数异步逻辑错误 #

addFile没有返回Promise，导致await addFile(...)得到的res是undefined，直接造成filename参数异常。同时SQL语句存在注入风险，还有拼写错误。

修复addFile函数：

export const addFile = (file_path) => {
  // 返回Promise处理异步DB操作
  return new Promise((resolve, reject) => {
    db.transaction(txn => {
      txn.executeSql(
        // 使用参数化查询避免SQL注入
        'INSERT INTO files(file_path, uploaded) VALUES (?, ?)',
        [file_path, false],
        (sqlTxn, res) => {
          console.log(`${file_path} video added successfully`);
          resolve(file_path);
        },
        (sqlTxn, error) => {
          console.log('error on adding file ' + error.message);
          reject(error);
        },
      );
    });
  });
};

3. PropTypes使用错误 #

TypeScript中不需要用PropTypes定义类型，且PropTypes.int、PropTypes.path、PropTypes.mime都是不存在的类型，会导致类型校验失效。直接用TypeScript原生类型系统即可。

4. 其他小问题修复 #

• 删除FileViewScreen中useState定义前打印currentFile的代码，避免未定义变量报错
• 修正addFile中的resopnse拼写错误为response（修复异步逻辑后该变量可删除）

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