React Native Props 不渲染到下一个场景答案

【问题标题】：React Native Props not Rendering to the next sceneReact Native Props 不渲染到下一个场景
【发布时间】：2021-01-11 11:32:51
【问题描述】：

我正在开发一个学生应用程序，在家中我有学生的姓名，按我希望应用程序转到第二个屏幕并显示他们获得的分数以及他们的姓名和家庭住址。执行此操作时，单击正在加载新场景但未显示道具的学生姓名。 StudentScene 中的 {this.props.students} 没有显示任何内容。也没有错误！

我的家庭场景代码如下：

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {Screen} from '../ui/Screen';
import {Card} from '../ui/Card';
import {Navigator, Scenes} from '../navigation';

type HomeProps = {};

class HomeScene extends Component<HomeProps> {
   static title = 'InStore locations';
   goToBoard = (students) => {
   Navigator.push(Scenes.STUDENT_SCENE, {students});
};

render() {
const students = [
  { id: '1', name: 'Tony', address: 'home 18',
    subject :{
             MAth : "89",
             Chemistry : "44"
          }
  },  
  { id: '2', name: 'Paul', address: 'home 34',
  subject :{
           Latin : "80",
           Physics : "47"
        }
  },  
  { id: '3', name: 'Simma', address: 'home 56',
  subject :{
           MAth : "78",
           History : "94"
        }
 },  
];
return (
  <Screen>
    <View>
      {students.map((student: any) => (
        <View key={student}>
          <Card onPress= {() => this.goToBoard(student)}>
          <Text>{student.name}</Text>
          </Card>
        </View>
      ))}
    </View>
  </Screen>
);
}
}

 export default HomeScene;

学生场景代码如下：

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {Screen} from '../ui/Screen';

type StudentProps = {students:any};

class StudentScene extends Component<StudentProps> {

render() {    
return (
    <Screen>
    <View>
      <Text>{this.props.students}</Text> 
    </View>
    </Screen>
 );
 }
 }

  export default StudentScene;

【问题讨论】：

标签： reactjs react-native rendering react-props

【解决方案1】：

试试这个方法

<Text>{JSON.stringify(this.props.route.params.students)}</Text>

【讨论】：

你能解释一下吗？我是编程新手。 “route.params”在这里做什么？
当您使用 react navigation 在屏幕之间传递数据时，您可以从屏幕的 props 中访问这些数据，并且这些数据存储在 route.params 对象中

【解决方案2】：

1)将参数发送到另一个屏幕：

< Button onPress={() => {

                  navigation.navigate('goToBoard', {
                       student : student
                    });
                    }}

2）接受参数到另一个屏幕：

const {student} = props.route.params

希望这能解决你的问题:)

【讨论】：