React Native点击列表项跳转路由传参问题及实现

功能背景 #

开发React Native应用过程中，已完成从MySQL服务端拉取职位数据、根据传入userid过滤展示对应用户职位列表的功能，数据展示效果如下：

待实现目标：点击列表内的职位条目时跳转至职位详情页，通过route.params将当前条目的完整数据传递到详情页。

初始代码问题 #

初版代码存在两处语法与逻辑错误，参考网上的类组件传参实现时未正确适配函数组件写法，导致功能无法运行：

• useCallback语法书写错误，运行时报错 "useCallback" is read-only
• Button组件的onPress事件中错误嵌套navigation.navigate调用，跳转传参逻辑无法正常执行

初始错误实现代码 #

const GetJobDetail=useCallback= (user,job, jobid, machinecode, startTime) =>{
    navigation.navigate('Jobview', { 
      UserId : user,
      Job : job,
      JobId:jobid,
      MachineCode : machinecode,
      StartTime : startTime
    },[]);
}

return (
  <View style={{ flex: 1, padding: 24 }}>
    {isLoading ? <ActivityIndicator/> : (
      <FlatList
        data={data}
        keyExtractor={({ id }, index) => id}
        renderItem={({ item }) => (
          <Button title={item.job} style={styles.rowViewContainer} onPress={()=>navigation.navigate(GetJobDetail(item.user,item.job,item.jobid,item.machinecode,item.startTime))}/>
        )}
      />
    )}
  </View>
);

参考的类组件传参代码（不适配函数组件） #

GetStudentIDFunction=(student_id,student_name, student_class, student_phone_number, student_email)=>{
  this.props.navigation.navigate('Third', { 
    ID : student_id,
    NAME : student_name,
    CLASS : student_class,
    PHONE_NUMBER : student_phone_number,
    EMAIL : student_email
  });
}

// 类组件内调用传参方法的代码
renderRow={ (rowData) => <Text style={styles.rowViewContainer} 
  onPress={this.GetStudentIDFunction.bind(
    this, rowData.student_id,
    rowData.student_name, 
    rowData.student_class, 
    rowData.student_phone_number, 
    rowData.student_email
  )} > 
  {rowData.student_name} 
</Text> }

最终可运行实现 #

调试后功能正常，核心逻辑分为两部分：

1. 列表页定义普通函数GetDetail，接收列表项的id、user、job、jobid、machinecode、startTime字段，调用navigation.navigate('JobView', {参数对象})完成页面跳转与参数传递
2. 详情页在useEffect钩子中通过route.params && route.params.对应变量名的安全写法取值，避免route.params为空时报错，拿到参数后完成页面状态赋值

列表页最终代码 #

const GetDetail=(id,user,job,jobid,machinecode,startTime)=>{
  navigation.navigate('JobView',{Id:id,UserId:user,Job:job,JobId:jobid,MachineCode:machinecode,StartTime:startTime});
}
return (
  <View style={{ flex: 1, padding: 24,backgroundColor:'cyan' }}>
    {isLoading ? <ActivityIndicator/> : (
      <FlatList
        data={data}
        keyExtractor={({ id }, index) => id}
        renderItem={({ item }) => (
          <Text style={styles.rowViewContainer} onPress={()=>{GetDetail(item.id,item.user,item.job,item.jobid,item.machinecode,item.startTime)}}>{item.job}</Text>
        )}
      />
    )}
  </View>
);
}

详情页参数接收代码 #

useEffect(()=>{
  setCode(route.params && route.params.MachineCode)
  setUserid(route.params && route.params.UserId)
  setJob(route.params && route.params.Job)
  setJid(route.params && route.params.JobId)
  setStarttime(route.params && route.params.StartTime)
  setId(route.params && route.params.Id)
},[])

该实现方案可复用于同类React Native函数组件路由传参场景。 #

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