react-native - 如何在反应原生元素中使用列表导航
问题描述
我在我的项目中集成了侧抽屉的反应原生元素列表项,但在这里我无法使用列表项导航到另一个页面
在这里,我更新了没有样式的整页代码
我已经尝试过以下代码:
import React, { Component } from 'react';
import { Col, Row, Grid } from 'react-native-easy-grid';
import Colors from '../constants/Colors';
import CartScreen from '../screens/CartScreen';
import {
View,
Image,
ScrollView,
Text,
TouchableOpacity,
Keyboard,
} from 'react-native';
import { DrawerActions, StackNavigator } from 'react-navigation';
import { List, ListItem, Button, navigationOptions } from 'react-
native-elements';
import { Ionicons, AntDesign, EvilIcons, Feather, FontAwesome } from
'@expo/vector-icons';
const list = [
{
title: 'HOME',
icon: 'shopping-cart',
page: 'MyCart',
color: '#D3D3D3'
},
{
title: 'OFFERS',
icon: 'notifications',
page: 'CartScreen'
}, ]
const sideMenuComponent = props =>
(
<View style={styles.container}>
<ScrollView>
<View style={styles.container2}>
{
list.map((item, i) => (
<ListItem
key={i}
title={item.title}
leftIcon={{ name: item.icon }}
linearGradientProps={{
colors: ['#D3D3D3', '#D3D3D3'],
start: [1, 0],
end: [0.2, 0],
}}
onPress={() =>
this.props.navigation.navigate(item.page)}
borderTopWidth={1}
titleStyle={{ color: Colors.textColor }}
/>
))
}
</View>
</ScrollView>
</View>
);
class SideMenu extends Component {
goToOtherScreen(page) {
this.props.navigation.navigate(page);
}
render() {
return sideMenuComponent(this.props);
}
}
导出默认 SideMenu;
解决方案
您可以使用可触摸不透明度包装列表项,并且可触摸不透明度的 onPress() 函数应该导航到您想要的位置。
推荐阅读
- pdf - 将 HTML 内容导入 dataTable pdf 导出
- matlab - 使用 MATLAB 的 nlinfit 函数时出错
- mysql - MySQL Workbench 不允许我运行查询
- azure - ADF 监视器列顺序拖动不起作用
- django - 如何使用重定向发送验证并在其他视图中使用
- iis - 网站在被域调用时远程工作,但不在服务器本身上
- database - Datomic 是否适合我的数据结构?
- django - 如果不允许用户访问页面,则 Django 重定向到上一页
- snakemake - Snakemake 问题:MissingRuleException:没有生成“文件名”的规则
- python - StaleElementReferenceException Python Selenium