React原生嵌套if-else的问题

Question

我是一个反应原生的新手。我创建了一个简单的选择器，当按下按钮时，它应该根据所选的操作系统显示操作系统规范。例如，如果我选择了Windows，它应该显示窗口规范。但我不知道如何用onPress显示所选项目的详细信息。

import {
AppForm as Form,
AppFormPicker as Picker,
SubmitButton,
} from "../components/forms";
const categories = [
{ label: "Mac", value: 1 },
{ label: "Windows", value: 2 },
{ label: "Linux", value: 3 },
{ label: "Android", value: 4 },
];
const osSpec = () => {
if (categories.value == 1) {
return <Text>Mac Specifications</Text>;
} else if (categories.value == 2) {
return <Text>Windows Specifications</Text>;
} else if (categories.value == 3) {
return <Text>Linux Specifications</Text>;
} else if (categories.value == 4) {
return <Text>Android Specifications</Text>;
} else {
return <Text>Pick a OS</Text>;
}
};
function OsSelect(props) {
return (
<View style={styles.container}>
<Form
initialValues={{
category: null,
}}
onSubmit={(osSpec) => console.log(osSpec)}
>
<Picker items={categories} name="category" placeholder="Category" />
<SubmitButton title="View Specs" onPress={osSpec} />
</Form>
</View>
);
}

谢谢你的帮助。

Answer 1

请这样尝试：

import {
AppForm as Form,
AppFormPicker as Picker,
SubmitButton,
} from "../components/forms";
const categories = [
{ label: "Mac", value: 1 },
{ label: "Windows", value: 2 },
{ label: "Linux", value: 3 },
{ label: "Android", value: 4 },
];
const osSpec = () => {
if (categories.value == 1) {
return <Text>Mac Specifications</Text>;
} else if (categories.value == 2) {
return <Text>Windows Specifications</Text>;
} else if (categories.value == 3) {
return <Text>Linux Specifications</Text>;
} else if (categories.value == 4) {
return <Text>Android Specifications</Text>;
} else {
return <Text>Pick a OS</Text>;
}
};
function OsSelect(props) {
return (
<View style={styles.container}>
<Form
initialValues={{
category: null,
}}
onSubmit={(osSpec) => console.log(osSpec)}
>
<Picker items={categories} name="category" placeholder="Category" />
<SubmitButton title="View Specs"  />
{osSpec()}
</Form>
</View>
);
}