reactjs - React Native Props not Rendering to the next scene

Question

I am developing a Student application where at the home I have the names of the students, onPress to the names I want the app to go to a second screen and show the the Marks they got along with their name and home address.While doing this, onclick to the name of the students the new scene is loading but the props are not showing. {this.props.students} in the StudentScene is not showing anything.Also there is no error!

my home scene code is below:

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;

and the Student Scene code is below:

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;

标签： reactjsreact-nativerenderingreact-props

Answer 1

试试这个方法

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