将屏幕从平面列表项目更改为该项目的问题屏幕

Question

我有一个母语为react的英语应用程序。我创建了一个包含类别和child_category的主页，如下所示在此处输入图像描述。当我点击一个类别时，它会显示它的child_category。我做得很好。但现在我尝试点击child_category，它会变成这样的问题屏幕，在这里输入图像描述。我尝试使用OnPress，但它不起作用。有解决方案吗？这是我的密码。

这是Navigator.js

const Stack = createStackNavigator();
const AppNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Start">
<Stack.Screen
name="Start"
component={Start}
options={{
headerShown: false,
title: 'Homepage',
headerStyle: {
backgroundColor: '#fff',
},
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center', // căn giữa stack navigator header
}}
/>
<Stack.Screen
name="Login"
component={Login}
options={{
title: 'Đăng nhập',
headerStyle: {
backgroundColor: '#fff',
},
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="Signup"
component={Signup}
options={{
title: 'Đăng ký',
headerStyle: {
backgroundColor: '#fff',
},
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="ChangePass"
component={ChangePass}
options={{
title: 'Cập nhật mật khẩu',
headerStyle: {
backgroundColor: '#fff',
},
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="EditProfile"
component={EditProfile}
options={{
title: 'Cập nhật thông tin tài khoản',
headerStyle: {
backgroundColor: '#fff',
},
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="Home"
component={TabSrceen}
options={{
headerShown: false,
title: 'Welcome to MyEnglish',
headerStyle: {
backgroundColor: '#fff',
},
headerTitleStyle: {
fontWeight: 'bold',
alignSelf: 'center',
},
}}
/>
<Stack.Screen
name="ChildCategoryItem"
component={ChildCategoryItem}
options={{
headerStyle: {
backgroundColor: '#fff',
},
headerTitleStyle: {
fontWeight: 'bold',
alignSelf: 'center',
},
}}
/>
<Stack.Screen
name="Quiz"
component={Quiz}
options={{
headerStyle: {
backgroundColor: '#fff',
},
headerTitleStyle: {
fontWeight: 'bold',
alignSelf: 'center',
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default AppNavigator;

这是我的Home.js。我在这个中使用ChildCategory.js

const Home = () => {
//render chủ đề con
const renderChildCategoryItem = ({item}) => {
return (
<ChildCaterogyItem
// CategoryName={data.find((x) => x.id == idSelected)}
data_child={item}
/>
);
};
//render chủ đề chính
const renderCategoryItem = (item) => {
return (
<CategoryItem
onSelected={onSelected}
selected={item.id == idSelected}
{...item}
data={item}
/>
);
};
const [data_child, setData_child] = useState([]);
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [idSelected, setIdSelected] = useState(1);
const onSelected = (id) => {
setIdSelected(id);
};
useEffect(() => {
_fetchAllCategory();
_fetchListChildCategory();
}, [idSelected]);
//fetch data chủ đề
const _fetchAllCategory = async () => {
try {
const res = await fetch('http://192.168.1.4:8080/api/category', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
const data = await res.json();
if (data.status == 200) {
setData(data.data);
}
} catch (error) {
console.log(error);
} finally {
setLoading(false);
}
};
//fetch data chủ đề con
const _fetchListChildCategory = async () => {
try {
setLoading(true);
const res = await fetch(
'http://192.168.1.4:8080/api/childcategory/' + idSelected,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
},
);
const data = await res.json();
if (data.status == 200) {
setData_child(data.data);
}
} catch (error) {
console.log(error);
} finally {
setLoading(false);
}
};
return (
<>
<StatusBar barStyle="light-content" />
<SafeAreaView style={styles.container}>
<ScrollView style={styles.wrap} showsVerticalScrollIndicator={false}>
<View style={styles.header}>
<View style={styles.headerTitle}>
<Text style={styles.heading}>
An English learning app to improve your English vocabulary
</Text>
</View>
</View>
<View style={styles.listCategoryItem}>
{data.map(renderCategoryItem)}
</View>
<View style={styles.listChildCategory}>
<Text style={styles.listChildCategoryText}>
Some categories for you
</Text>
<View style={styles.listCategory}>
<FlatList
data={data_child}
// extraData={data_child}
// keyExtractor ={(item)=> item.id}
renderItem={renderChildCategoryItem}
/>

{loading && (
<View style={styles.loading}>
<ActivityIndicator size="large" color="#F1CB7A" />
</View>
)}
</View>
</View>
</ScrollView>
</SafeAreaView>
</>
);
};

这是我的ChildCategoryItem.js`

const ChildCategoryItem = ({data_child}, props) => {
return (
<TouchableOpacity
style={styles.container}
// onPress={() => this.props.navigation.navigate('Quiz',{id: item.id}) }
// onPress={() => navigation.push('Quiz',item)}
>
<Button
title="Start"
onPress={() => props.navigation.navigate('Quiz', {id: item.id})}
/>
<View>
<Image source={{uri: data_child.Image}} style={styles.image} />
</View>
<Text style={styles.name}>{data_child.id}</Text>
<Text style={styles.description}>{data_child.Description}</Text>
<View style={styles.smileList}>
<Image
source={require('../assets/images/smile.png')}
style={styles.icon}
/>
<Text style={styles.smile}>{data_child.smile || 0}%</Text>
</View>
</TouchableOpacity>
);
};

这是我的测验

export default class Questions extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
questions: [],
current: 0,
correctScore: 5,
totalScore: 50,
data: {
score: 0,
correctAnswers: 0
},
completed: false
};
}

fetchQuestions = async () => {
const {params} = this.props.navigation.state;
await this.setState({ loading: true });
const response = await fetch(
`http://192.168.1.4:8080/api/question/`, + params.id,
// + params,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
},
);
const questions = await response.json();
const { data } = questions;
data.forEach(item => {
item.id = Math.floor(Math.random() * 10000);
});
await this.setState({ questions: data, loading: false });
};

Answer 1

您是否尝试过在按下时通过控制台记录它，看看它是否被调用？我相信这可能是一个样式/方法问题，因为你试图将整个组件包裹在可触摸的不透明中。尝试将可触摸的不透明度更改为视图，然后单击按钮导航到屏幕。

如果这不起作用，你的导航功能可能不会通过道具传递下去。还要确保从react native和not react native-stature手势处理程序导入了TouchableOpacity。

编辑：似乎你的按钮使用了"；道具"；但是你的包装使用"；这个道具；你应该使用"；道具"；因为它是通过功能组件而不是基于类的组件传递的。