Question

我在项目中集成了side Drawer的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;

Answer 1

您可以使用可触摸的不透明度包装列表项，并且可触摸的不透明度的onPress（）函数应导航到您想要的位置。

如何在React Native元素中使用列表导航

1 个答案: