Как перемещаться по списку в реагирующих нативных элементах

Я интегрировал элементы списка реагирующих собственных элементов для бокового ящика в свой проект, но здесь я не могу перейти с помощью элементов списка на другую страницу.

Здесь я обновил полный код страницы без стилей

Вот сообщение об ошибке

Я уже пробовал следующий код ниже:

 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 по умолчанию;

В чем твоя ошибка? Вы используете react-navigation?

Pierre Capo 27.03.2019 15:33

Нет, не на этой странице, и я получаю неопределенное значение, это не ошибка объекта

Jack 27.03.2019 15:36

Согласно полученной вами ошибке, ваш текущий экран не имеет доступа к объекту навигации в его реквизитах. Трудно сказать, почему, не видя остальной код

Pierre Capo 27.03.2019 16:16

Я обновил полный код страницы

Jack 27.03.2019 16:27
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
4
917
1

Ответы 1

Вы можете обернуть элемент списка сенсорной непрозрачностью, и функция onPress() сенсорной непрозрачности должна перемещаться туда, куда вы хотите.

Я никогда раньше не использовал список React Native Elements, но то, что я делаю, когда использую FlatList (что я рекомендую), — это обертывание элемента списка сенсорной непрозрачностью. Таким образом, вы можете щелкнуть дырку в списке, и метод onPress для tochable будет выполнять навигацию.

Quim Baget 27.03.2019 21:02

Другие вопросы по теме