[英]React Native - How to use navigation on FlatList property?
I like to know how i can use React Navigation on FlatList property, where the name of the Stack.Screen comes from a .json
file.我想知道我可以使用阵营通航FlatList财产,其中Stack.Screen的名字来自一个
.json
文件。
And with that, when the user click on that Item, they goes to another page of the application.这样,当用户单击该项目时,他们会转到应用程序的另一个页面。
Data数据
{
Data: [
{
"key": "0",
"label": "Test",
"goTo": "Test", <--- Here goes the name of Stack.Screen from routes.js
}
]
}
FlatList structure FlatList 结构
function Item({ label, goTo }) {
return (
<Ripple rippleCentered onPressIn={goTo}> // (react-native-material-ripple)
<Option>
<Icon name={onIcon} size={28} color={onColor} /> // (react-native-vector-icons)
<OptionLabel color={onColor}>{label}</OptionLabel>
</Option>
</Ripple>
);
}
I've already tried to use navigation.navigate({goTo})
on onPressIn
property from Ripple, but a ReferenceError appears: Can't find variable: navigation我已经尝试在 Ripple 的
onPressIn
属性上使用navigation.navigate({goTo})
,但出现 ReferenceError:找不到变量:导航
Final exported component最终导出的组件
export default class Menu extends Component {
render() {
return (
<Container color={this.props.color}>
<FlatList
data={Data}
showsVerticalScrollIndicator={false}
keyExtractor={item => item.key}
numColumns={5}
columnWrapperStyle={Styles.Row}
renderItem={({ item }) =>
<Item
goTo={item.goTo}
label={item.label}
/>
}
/>
</Container>
);
}
}
import json from './myfile.json'; // reading from json file
export default class Menu extends Component {
render() {
return (
<Container color={this.props.color}>
<FlatList
data={json.Data} // accessing Data from json
showsVerticalScrollIndicator={false}
keyExtractor={item => item.key}
numColumns={5}
columnWrapperStyle={Styles.Row}
renderItem={({ item }) =>
<Item
goTo={item.goTo}
label={item.label}
/>
}
/>
</Container>
);
}
}
You could use useNavigation
hook to call navigation.navigate(goTo)
您可以使用
useNavigation
挂钩来调用navigation.navigate(goTo)
eg例如
import { useNavigation } from '@react-navigation/native';
function Item({ label, goTo }) {
const navigation = useNavigation(); // navigation hook
return (
<Ripple rippleCentered onPressIn={() => navigation.navigate(goTo)}> // navigate to goTo screen
<Option>
<Icon name={onIcon} size={28} color={onColor} />
<OptionLabel color={onColor}>{label}</OptionLabel>
</Option>
</Ripple>
);
}
Please notice that Menu
needs to be under NavigationContainer
so useNavigation
can work.请注意
Menu
需要在NavigationContainer
下,这样useNavigation
才能工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.