react-native - React Native 导航到另一个页面
问题描述
我正在学习 React Native。expo init
我使用选项卡选项安装了一个初始项目。我一直在玩它,但我觉得创建一个按钮并将用户发送到另一个页面这样简单的事情有点挣扎。
我在谷歌上看到的所有例子都在使用一个类
class HomeScreen extends React.Component {}
在按钮组件内部:
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
问题是,在您第一次创建项目时给出的示例中, homeScreen 是一个函数
export default function PlayScreen() {
return (
<View style={styles.container}>
);}
我的问题是我怎么能做这么简单的任务?你有什么例子吗?我应该更改原始代码并在课堂上使用它吗?你建议我这样做吗?
谢谢
添加我要更改的页面的代码:
import * as WebBrowser from 'expo-web-browser';
import React from 'react';
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
FlatList,
Button,
} from 'react-native';
import TabBarIcon from '../components/TabBarIcon';
import ListItem from "../components/ListItem";
import { MonoText } from '../components/StyledText';
export default function PlayScreen() {
return (
<View style={styles.container}>
<ScrollView
style={styles.container}
contentContainerStyle={styles.contentContainer}>
{/* <View style={styles.welcomeContainer}>
<Image
source={
__DEV__
? require('../assets/images/robot-dev.png')
: require('../assets/images/robot-prod.png')
}
style={styles.welcomeImage}
/>
</View> */}
<View style={{flex:1, flexDirection:'column', justifyContent:'center'}}>
<View style={{flexDirection:'row', justifyContent: 'space-between', paddingLeft:15, paddingRight: 15,}}>
<Button title='Search games' style={styles.w80} onPress={HERE IS WHERE I WANT TO REDIRECT THE USER}></Button>
{/* <Button title='View Map' style={styles.w80} ></Button> */}
<TabBarIcon
focused='false'
onPress=''
name={
Platform.OS === 'ios'
? `ios-map`
: 'md-map'
}
/>
</View>
</View>
<Text style={[styles.header, styles.contentContainer]}>
Next games:
</Text>
<View style={[ styles.w100, styles.pl20, styles.pr20]}>
{/* <DevelopmentModeNotice /> */}
<FlatList style={[styles.w100]}
data={[{key: '1', venue: 'Lammas Park', date: '22/02/2019', startTime: '20:00', endTime: '21:00', maxPlayers: 10, totalPlayers: 9}, {key: '2', venue: 'Lammas Park', date: '22/02/2019', startTime: '21:00', endTime: '22:00', maxPlayers: 12, totalPlayers: 5}]}
renderItem={({item}) =>
<ListItem
image={item.image}
id={item.key}
venue={item.venue}
date={item.date}
startTime={item.startTime}
endTime={item.endTime}
maxPlayer={item.maxPlayer}
totalPlayer={item.totalPlayer}
// onItemPressed={() => props.onItemSelected(item.key)}
/>
// <View style={[styles.contentContainer, styles.bgGray]}>
// <Text>{item.key} - {item.venue}</Text>
// <Text>{item.date} - {item.startTime}: {item.endTime}</Text>
// </View>
}
/>
</View>
<Text style={[styles.header, styles.contentContainer]}>
Games Completed:
</Text>
<View style={[ styles.w100, styles.pl20, styles.mb30]}>
{/* <DevelopmentModeNotice /> */}
<FlatList style={styles.w100}
data={[
{ key: '1', venue: 'Lammas Park', date: '22/02/2019', startTime: '20:00', endTime: '21:00', maxPlayers: 10, totalPlayers: 9},
{key: '2', venue: 'Lammas Park', date: '22/02/2019', startTime: '21:00', endTime: '22:00', maxPlayers: 12, totalPlayers: 5},
{key: '2', venue: 'Lammas Park', date: '22/02/2019', startTime: '21:00', endTime: '22:00', maxPlayers: 12, totalPlayers: 5},
{key: '2', venue: 'Lammas Park', date: '22/02/2019', startTime: '21:00', endTime: '22:00', maxPlayers: 12, totalPlayers: 5}
]}
renderItem={({item}) =>
<View style={styles.contentContainer}>
<Text>{item.key} - {item.venue}</Text>
<Text>{item.date} - {item.startTime}: {item.endTime}</Text>
</View>
}
/>
</View>
</ScrollView>
</View>
);
}
HomeScreen.navigationOptions = {
title: 'Home',
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
header: {
width: '100%',
backgroundColor: '#fff',
fontSize: 15,
fontWeight: 'bold',
paddingLeft: 20,
},
developmentModeText: {
marginBottom: 20,
color: 'rgba(0,0,0,0.4)',
fontSize: 14,
lineHeight: 19,
textAlign: 'center',
},
contentContainer: {
paddingTop: 30,
},
});
解决方案
首先,配置stack navigator
并将其移动到您离开的页面。
例子
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
this.props.navigation.dispatch(StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Details' })
],
}))
}}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to Home"
onPress={() => {
this.props.navigation.dispatch(StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Home' })
],
}))
}}
/>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
}, {
initialRouteName: 'Home',
});
export default createAppContainer(AppNavigator);
推荐阅读
- microsoft-graph-api - Microsoft Teams 中频道和消息级别的自定义数据
- javascript - 如何使用本地存储在网页之间传输值?
- python - 在有向图中查找节点的入度
- wordpress - 使用 Mariadb + NGINX 和自定义 php-fpm Dockerfile 的 WordPress 设置中的权限错误
- aws-lambda - AWS Step Functions 中的状态之间的通信
- sql - 查找按其他两列分组的列的前 n 个总和
- html - 我无法在我的父类中选择我的第二段
- excel - 从下拉列表中选择值时从另一张表中获取记录
- javascript - 如何在ckeditor5中添加音频(自定义)标签
- javascript - 如何从 safeHtml 获取 div 的 id?