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

Question

我是一个RN新手，我正在为自己建立一个小项目，作为我学习过程的一部分。我能够从我在 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条路线可用，"主页"和"详细信息"， 然后你可以调用navigate('Home'(或navigate('Details'(

希望我能帮到你。