react-native - 如何在 React Native 6 中使用导航调用我们自己的构建
问题描述
帮助,
首先,React Native 6 或 5 有 withNavigation 吗?我在 React Native 网站的文档中找不到它。
所以,我发现了一些线程,我们可以像这样构建我们自己的 withNavigation :
withNavigation.js
import React from 'react';
import { useNavigation } from '@react-navigation/native'; // not sure package name
export const withNavigation = (Component) => {
return (props) => {
const navigation = useNavigation();
return <Component navigation={navigation} {...props} />;
};
};
但我不知道如何调用或使用自己的构建 withNavigation。
这是我的源代码:
结果列表.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
import ResultsDetail from './ResultsDetail';
import { withNavigation } from '../helper/withNavigation';
const ResultList = ({ title, results }) => {
console.log(withNavigation.component);
return (
<View style={styles.container}>
<Text style={styles.title}>{title}</Text>
<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
data={results}
keyExtractor={(results) => results.id}
renderItem={({item}) => {
return (
<TouchableOpacity onPress={() => withNavigation('ResultShowScreen')}>
<ResultsDetail results={item} />
</TouchableOpacity>
)
}}
/>
</View>
)
};
const styles = StyleSheet.create({
title: {
fontSize: 18,
fontWeight: 'bold',
marginLeft: 15,
marginBottom: 5,
},
container: {
marginBottom: 10
}
});
export default ResultList;
在这里 :
console.log(withNavigation.component)
它显示:未定义
如何使用我们自己的 withNavigation 获取导航道具?
谢谢你
解决方案
由于您的辅助函数 ,withNavigation
是一个高阶组件 (HoC),您必须用它包装您的组件才能使用它:
const ResultList = ({ title, results, navigation }) => {
return (
<View style={styles.container}>
<Text style={styles.title}>{title}</Text>
<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
data={results}
keyExtractor={(results) => results.id}
renderItem={({ item }) => {
return (
// Now you can use the navigation prop inside of your component
<TouchableOpacity onPress={() => navigation.navigate('MyRoute')}>
<ResultsDetail results={item} />
</TouchableOpacity>
);
}}
/>
</View>
);
};
// withNavigation adds the navigation property to your ResultList component's properties
export default withNavigation(ResultList);
我认为你在 React Navigation 5 或 6 中找不到的原因withNavigation
是因为他们建议你改用他们的内置钩子。我不确定为什么你需要使用定制HoC
的useNavigation
钩子。如果您没有特定的理由使用您的 custom HoC
,内置的钩子可以简化您的代码:
import { useNavigation } from '@react-navigation/native';
const ResultList = ({ title, results }) => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<Text style={styles.title}>{title}</Text>
<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
data={results}
keyExtractor={(results) => results.id}
renderItem={({ item }) => {
return (
// You can use the navigation property inside of your component
<TouchableOpacity onPress={() => navigation.navigate('MyRoute')}>
<ResultsDetail results={item} />
</TouchableOpacity>
);
}}
/>
</View>
);
};
export default ResultList;
推荐阅读
- python - 设置数据框列返回持久的“值正在尝试在切片的副本上设置”警告
- sql - SQL - Impala - 如何将一个分类列展开为多个?
- javascript - Create unique array from arrays (Multiple)
- r - 使用 group_by 和列条件在数据框中查找值
- r - pheatmap 中有一些奇怪的东西(一个错误?)
- angular - ionic - RXJS 错误:rxjs_Observable__.Observable.combineLatest 不是函数
- r - 要替换的项目数不是R中替换长度错误的倍数
- javascript - 在 ReactJS 中覆盖父组件方法
- java - How to get the body of an Email in Text or string format not in HTML
- java - BouncyCastle 验证 secp256k1 公钥生成