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

Question

如何在触摸 ListItem 时导航到新屏幕？我的 ListItems 带有向右的 V 形，给人的印象是触摸 ListItem 会进入详细屏幕。然后，一个详细的屏幕将返回到原始的 ListItem 屏幕。

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

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

然后我在 ListItem 中使用了 ListitemDetail 反应元素

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

它没有导航到 ListitemDetial 的主页。

但是当我直接使用 'Home' 时，它会将我带到主屏幕，这样做的缺点是，我无法返回（显然 header 上不会显示后退箭头）

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 上的 'Setting' 屏幕或 Facebook 上的 'Menu' 屏幕。有更好的方法吗？

Answer 1

您的屏幕有一些问题。您在 createStackNavigator 中只有一个屏幕，称为 Home。这样，如果您调用一个不存在的屏幕，它会回退到 createStackNavigator.

中声明的第一个屏幕

所以试试这样：

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

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

我假设，您在 HomeScreen 中有您的 ListItem-Component，并且您在 export of this ScreenComponent 中使用 withNavigation() 以通过道具使您的 navigator 可用。然后您可以简单地使用以下命令切换到另一个屏幕：

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

以这种方式尝试一下（如果对您有帮助，请不要忘记为这个答案投票）

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

How to navigate from ListItem (react-native-elements) to new screen?

react-native

react-native-elements