如何在触摸 ListItem 时导航到新屏幕?我的 ListItems 带有 V 形朝右,给人一种触摸 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 的主页。
但是当我直接使用“主页”时,它会将我带到主屏幕,这样做的缺点是,我无法返回(显然,后退箭头不会显示在标题上)
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 上的“菜单”屏幕。有更好的方法吗?
最佳答案
您的屏幕存在一些问题。
createStackNavigator
中只有一个屏幕,称为 Home
。
这样,如果您调用不存在的屏幕,它将回退到 createStackNavigator
中声明的第一个屏幕。
所以尝试这样:
const MyApp = createStackNavigator({
Home: { screen: HomeScreen },
DetailScreen: { screen: DetailScreen },
});
AppRegistry.registerComponent('MyApp', () => createAppContainer(MyApp));
这样,Home
就是启动应用程序后出现的第一个屏幕。
我假设,您的 ListItem-Component 位于 HomeScreen 中,并且您在 此 ScreenComponent 的导出
中使用 withNavigation()
来创建您的 navigator
code> 可通过 props 获得。
然后您只需使用以下命令即可切换到另一个屏幕:
onPress={() => this.props.navigation.navigate(
"DetailScreen",
{ myParamsToThisScreen:
{test: true,
param1: false
}
})}
这样尝试一下(如果这个答案对您有帮助,请不要忘记投票)
关于react-native - 如何从 ListItem (react-native-elements) 导航到新屏幕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56918760/