发送道具在子组件中获取空对象

Question

所以我有 homeScreen，它正在获取内部数据并将其放入一个状态，我有一个按钮，可以通过导航将我带到详细屏幕我正在尝试通过道具发送数据，但运气不好，我变空了每当我在详细的卡片组件中控制台记录道具时对象

HomeScreen.js

  return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{ backGroundColor:'red'}}>
      <Button
        title="Details page"
        onPress={() => {
          return (
          <DetailedCard title={this.state.title} rating={this.state.rating} source={this.state.image} />,
          this.props.navigation.navigate('Details'));}}
      />
 </View>
        <ScrollView style={{flex: 1}}>
          <Card title={this.state.title} rating={this.state.rating} source={this.state.image}/>
        </ScrollView>
        <Text>here images</Text>
      </View>
    );
  }
}

DetailCard.js

import React from 'react';
import {Image, View, Text} from 'react-native';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';

const DetailedCard = props => {
  console.log(props);
  return Array.from({length: 9}).map((i, currentValue) => {
    return (
      <View style={{flex: 1}}>
        <View
          style={{
            flex: 2,
            borderRadius: 10,
            borderWidth: 1,
            borderColor: 'black',
            margin: 10,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>
            {props.title[1] ? `${props.title[currentValue]}` : 'Loading'}
          </Text>
        </View>

        <Image
          style={{flex: 8, width: hp('50%'), height: wp('50%')}}
          source={{uri: `${props.source[currentValue]}`}}
        />
        <Text style={{flex: 2, borderRadius: 10, margin: 10}}>
          {props.rating[currentValue]}
        </Text>
      </View>
    );
  });
};
export default DetailedCard;

detailsScreen.js

export default class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
          <Button
            title="Go back"
            onPress={() => this.props.navigation.goBack()}
          />
          <DetailedCard  />
      </View>
    );
  }
}

Answer 1

这不是传递道具的正确方式。请检查 documentation

试试这个

<Button
        title="Details page"
        onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Details', {
              rating: this.state.rating,
              source: this.state.image,
            });
          }}
      />

并在详情界面获取道具并发送至DetailedCard

export default class DetailsScreen extends React.Component {
  render() {
    const rating = navigation.getParam('rating', '');
    const source = navigation.getParam('source', '');
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
          <Button
            title="Go back"
            onPress={() => this.props.navigation.goBack()}
          />
          <DetailedCard rating={rating} source={source}  />
      </View>
    );
  }
}

发送道具在子组件中获取空对象

Sending props getting empty object in the child component

state

react-native

react-props