如何从ListItem(react-native-elements)导航到新屏幕?

时间:2019-07-07 01:24:25

标签: react-native react-native-elements

如何在触摸ListItem时导航到新屏幕?我有带有雪佛龙的向右的ListItems,给人的感觉是,触摸ListItem将进入详细屏幕。然后,实际屏幕将返回到原始ListItem屏幕。

我的ListItem在Menu.js中,我有一个屏幕Home.js,导入到Menu.js中,然后将主屏幕放入

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

然后我在ListItem中使用ListitemDetail react元素

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

它没有导航到ListitemDetial的主页。

但是当我直接使用'Home'时,它将带我进入Home屏幕,这样做的缺点是我无法返回(很明显,标题上不会显示后退箭头)

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上的“菜单”屏幕。有更好的方法吗?

1 个答案:

答案 0 :(得分:1)

您的屏幕有一些问题。 createStackNavigator中只有一个屏幕,称为Home。 这样,如果您调用不存在的Screen,它将退回到createStackNavigator中声明的第一个Screen。

所以尝试这样:

const MyApp = createStackNavigator({
  Home: { screen: HomeScreen },
  DetailScreen: { screen: DetailScreen },
});
AppRegistry.registerComponent('MyApp', () => createAppContainer(MyApp));

这样,Home是启动应用程序后出现的第一个屏幕。

我假设您在HomeScreen中拥有ListItem-Component,并且您在withNavigation()中使用了export of this ScreenComponent以使navigator可以通过道具使用。 然后,您只需使用以下命令即可切换到另一个屏幕:

onPress={() => this.props.navigation.navigate(
    "DetailScreen",
    { myParamsToThisScreen: 
        {test: true, 
         param1: false
        }
    })}

以这种方式尝试(如果对您有帮助,请不要忘了投票)