Как перейти от ListItem (response-native-elements) к новому экрану? - PullRequest
Новая
       10

Как перейти от ListItem (response-native-elements) к новому экрану?

0 голосов
/ 07 июля 2019

Как перейти к новому экрану при касании ListItem?У меня есть ListItems с шевронами вправо, создавая впечатление, что касание ListItem приведет к подробному экрану.Детализированный экран затем вернется к исходному экрану ListItem.

Мой ListItem находится в Menu.js, у меня есть экран Home.js, импортированный в Menu.js. Затем я помещаю Начальный экран в 

const ListitemDetail = createStackNavigator({
  Home: Home
});

Затем я использовал элемент реагирования ListitemDetail в моемListItem 

          <ListItem
              key={i}
              title={item.title}
              leftIcon={{ name: item.icon }}
              bottomDivider={true}
              chevron
              onPress={() => this.props.navigation.navigate("ListitemDetail")}
          />

Он не перемещается в Дом ListitemDetial.

Но когда я использую «Домой» напрямую, он выводит меня на главный экран, недостатком этого является то, что я не могу вернуться (стрелка назад не будет отображаться в заголовке, очевидно) 

onPress={() => this.props.navigation.navigate("Home")}

Вот мой Menu.js 

import React, { Component } from "react";
import {
  Text,
  StyleSheet,
  View,
  Animated,
  ScrollView,
  SectionList,
  SafeAreaView,
  FlatList
} from "react-native";
import { createStackNavigator } from "react-navigation";
import Home from "./Home";
import { ListItem } from "react-native-elements";

const ListitemDetail = createStackNavigator({
  Home: Home
});

const list2 = [
  {
    title: "Appointments",
    icon: "av-timer"
  },
  {
    title: "Trips",
    icon: "flight-takeoff"
  }
];
export default class Menu extends Component {
  render() {
    return (
      <SafeAreaView>
        <ScrollView>
          <View>
            {list2.map((item, i) => (
              <ListItem
                key={i}
                title={item.title}
                leftIcon={{ name: item.icon }}
                bottomDivider={true}
                chevron
                onPress={() => this.props.navigation.navigate("ListitemDetail")}
              />
            ))}
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

В идеале я хочу добиться чего-то вроде экрана «Настройка» на WhatsApp или «Меню» на Facebook.Есть ли лучший способ сделать это?

...