Question

能够在反应导航中不带参数的屏幕之间移动，但无法传递参数。

我有两个名为

的屏幕

UsersScreen

这是所有用户的列表和

UserDetailsScreen

是单个用户的列表，将在

时显示

用户按钮

从

单击

UsersScreen

但不显示

用户的详细信息

过去了，它显示了这个常见错误

无法读取未定义的属性'getParam' TypeError：无法读取未定义的属性“ getParam” 在UserDetailsScreen.render（module：//components/UserDetailsScreen.js.js！transpiled：51：21）在ga（[零食内部] 在ha（[小吃内部] 在Js（[小吃内部] 在Ys（[零食内部] 在Ps（[零食内部] 在Ts（[零食内部] 在[零食内部] 在t.unstable_runWithPriority（[小吃内部] 在uo（https://snack.expo.io/web-player/36/static/js/2.0dacf2c5.chunk.js:1:1049642）

现在，我知道这是说未定义getParam，但是由于我已经在

中定义了它，所以我不知道该如何定义它

UsersScreen

这是

UsersScreen

  import React, { Component } from 'react';
    import { StyleSheet, FlatList, ActivityIndicator, View, Text, ScrollView } from 'react-native';
    import { ListItem, Button } from 'react-native-elements';

    export default class UsersScreen extends Component {
     static navigationOptions = ({ navigation }) => {
        return {
          title: 'User List',
          headerRight: (
            <Button
              buttonStyle={{ padding: 0, backgroundColor: 'transparent' }}
              icon={{ name: 'add-circle', style: { marginRight: 0, fontSize: 28 } }}
              onPress={() => { 
                navigation.navigate('Home', {
                  onNavigateBack: this.handleOnNavigateBack
                }); 
              }}
            />
          ),
        };
      };

      constructor(props) {
        super(props);
        this.state = {
          isLoading: true,
           users: [
            { names: "Tijani Majekodunmi", id: 1, matric: 569, drugCase: 'Marijuana', attendance:['present', 'present', 'present', 'absent', 'present', 'absence'] },
            { names: "Yele Soworo", id: 2, matric: 147, drugCase: 'Cocaine', attendance:['absent', 'present', 'absent', 'absent', 'present', 'absence'] },
            { names: "John Okafor", id:3, matric: 852, drugCase: 'Codeine', attendance:['present', 'present', 'present', 'absent', 'present', 'absence']}

          ],
          notFound: 'Users not found.\nPlease click (+) button to add it.'
        };
      }

      render() {
        const {users} = this.state;
        return(
        <ScrollView>
    <View>
    {users.map((item, index) => (
    <View>
    <Text>{item.names}</Text>
    <Text>{ item.id }</Text>
    <Button
              title="Go to Details"
              onPress={() => {
                /* 1. Navigate to the Details route with params */
                this.props.navigation.navigate('UserDetails', {
                  id: item.id,
                  matric: item.matric,
                  drugCase: item.drugCase,
                  attendance: item.attendance
                });
              }}
            />
    </View>
    ))}
    </View>
    </ScrollView>

        );
      }
    }

    const styles = StyleSheet.create({
      container: {
       flex: 1,
       paddingBottom: 22
      },
      item: {
        padding: 10,
        fontSize: 18,
        height: 44,
      },
      activity: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        alignItems: 'center',
        justifyContent: 'center'
      },
      message: {
        padding: 16,
        fontSize: 18,
        color: 'red'
      }
    });

and this is the 
> UserDetailsScreen

import React, { Component } from 'react';
import { ScrollView, StyleSheet, Image, ActivityIndicator, View, Text } from 'react-native';
import { Card, Button } from 'react-native-elements';

export default class UserDetailsScreen extends Component {
  static navigationOptions = {
    title: 'User Details',
  }

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      user: {},
      id: '',
    };
  }

  render() {
    const { user } = this.props;
    const id = user.getParam('id', 1);
    const matric = user.getParam('matric', 777);

    return (
      <ScrollView>
      <View>
      <Text>Welcome</Text>
      <Text>UserId: {JSON.stringify(id)}</Text>
      </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  subContainer: {
    flex: 1,
    paddingBottom: 20,
    borderBottomWidth: 2,
    borderBottomColor: '#CCCCCC',
  },
  activity: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  },
  detailButton: {
    marginTop: 10
  }
})

如何通过和访问

用户详细信息

通过

UsersScreen

到

UserDetailsScreen

Answer 1

这是您检索道具的方式：

this.props.navigation.getParam('UserDetails','DefaultValue');

最好在您的componentDidMount()

中执行此操作

无法将参数传递给React Navigation v3中的路线

1 个答案: