动态创建从我的本地 JSON 文件夹中获取数据的配置文件页面

Question

我是一名注册护士新手，我正在为自己构建一个小项目，作为我学习过程的一部分。我能够从我在 RN 中本地创建的 JSON 文件动态地在我的目录屏幕中填充名称列表。但是，现在我试图从该名称列表中获取每个按钮，以将我带到该特定角色的个人资料及其基本信息。当我点击它时，什么也没有发生。我真的不确定发生了什么。但是，我在想：如果我要创建另一个文件夹以便显示配置文件，当在目录中单击该按钮时，我将如何处理？任何帮助或线索表示赞赏！

这就是我设置 JSON 文件的方式：

//characters.js    
const characters = [
      { id: "1", name: "Homer Simpson", occupation: "Nuclear Safety Inspector"},
      { id: "2", name: "Marge Simpson", occupation: "Stay-at-home mom"},
      { id: "3", name: "Bart Simpson", occupation: "Student" },
      { id: "4", name: "Lisa Simpson", occupation: "Student" },
      { id: "5", name: "Maggie Simpson", occupation: "Baby" },
      { id: "6", name: "Scratchy", occupation: "Cat" }
    ];
    export default characters;

这是我的角色目录，我可以在其中动态拉入角色列表。

//CharacterDirectory.js
import React, { Component } from "react";
import { Text, View, StyleSheet, ImageBackground, Button, FlatList } from "react-native";
import { withNavigation } from "react-navigation";
import {
    createStackNavigator,
    createAppContainer,
    createBottomTabNavigator
  } from "react-navigation";
import characters from "../Data/Characters";

class CharacterDirectory extends React.Component {
    static navigationOptions = {
        title: "The Simpsons",
        headerStyle: {
          backgroundColor: "#53b4e6"
        },
        headerTintColor: "#f6c945",
        headerTitleStyle: {
          fontWeight: "bold"
        },
      };
  render() {
      const { navigation } = this.props;
      const type = navigation.getParam('type');
      const typeData = characters[type];
    return (
        <View style={styles.container}>
            {characters.map( (data,index) => (
                <Button 
                    title={`${data.name}`}
                    onPress={() => 
                        this.props.navigation.navigate('characters', {
                            type : type,
                            item: data
                        })}
                        />
            ))}
        </View>
    )
  }
}
const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
      alignContent: "center"
    }
  });
  export default withNavigation(CharacterDirectory);

对我来说棘手的部分是，我需要在 onPress 函数中作为参数传递，因为“字符”没有做任何事情。

Answer 1

请显示您的导航器定义。

您需要传递给导航函数的不是您在导航器中定义的“字符”。

假设你有这样的 AppNavigator

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen
  },
  {
    initialRouteName: "Home"
  }
);

然后你有 2 条路线可用，'Home' 和 'Details'， 然后你可以调用 navigate('Home') 或 navigate('Details')

希望我能帮到你。