如何通过使用react导航在第一个类中声明另一个类来导航其他屏幕
如何通过使用react导航在第一个类中声明另一个类来导航其他屏幕
提问于 2019-04-07 18:05:52
我现在是react本机的新手，我对切换屏幕到另一个屏幕感到困惑，我不知道为什么当我单击第一个屏幕上声明的onpress函数时，我的导入第二个屏幕不能工作。
import SecondScreen from './Screens/SecondScreen';
export default class FirstScreen extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Header searchBar rounded>
<Left>
<Button transparent>
<Icon name='menu'/>
</Button>
</Left>
<Body>
<Title>Pay Bills</Title>
</Body>
<Item>
<Icon name="ios-search" />
<Input placeholder="Search" />
<Icon name="ios-people" />
</Item>
<Button transparent>
<Text>Search</Text>
</Button>
</Header>
<StatusBar backgroundColor='#6633ff' barStyle='light-content' />
<Text>How much would you like to pay?</Text>
<View style={{flex:1}}>
<Image onPress={()=> this.props.navigation.navigate('SecondScreen')} source={require('./Assets/example.png')}
style={{flex:1,width:null,height:null,resizeMode:'cover'}}
/>
</View>
</View>
);
}
}如您所见，我使用onpress函数来导航第二个屏幕。
onPress={()=> this.props.navigation.navigate('SecondScreen')}我的app.js文件
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, SafeAreaView, ScrollView, Dimensions} from 'react-native';
import {createDrawerNavigator, DrawerItems} from 'react-navigation';
//screens
import LoginScreen from './Screens/LoginScreen';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<AppDrawerNavigator/>
);
}
}
const AppDrawerNavigator = createDrawerNavigator({
Login:LoginScreen,
});如何使用react导航将我的第一个屏幕移动到第二个屏幕。谢谢。
回答 2
Stack Overflow用户
发布于 2019-04-07 19:24:44
您需要在app.js中进行一些更改。在createStackNavigator中添加createDrawerNavigator。将那些你不想添加到折叠器中的屏幕添加到stacknavigator中。在createDrawerNavigator中，添加您想要在抽屉中显示的屏幕。
请检查以下代码
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
SafeAreaView,
ScrollView,
Dimensions
} from "react-native";
import { createStackNavigator,createDrawerNavigator DrawerItems } from "react-navigation";
//screens
import LoginScreen from "./Screens/LoginScreen";
const instructions = Platform.select({
ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
android:
"Double tap R on your keyboard to reload,\n" +
"Shake or press menu button for dev menu"
});
type Props = {};
export default class App extends Component<Props> {
render() {
return( <StackNav />);
}
}
const StackNav = createStackNavigator(
{
Drawer: {
screen:AppDrawerNavigator ,
navigationOptions: {
headerMode: "none",
header: null
}
},
First: {
screen: First,
navigationOptions: {
headerMode: "none",
header: null
}
},
Second: {
screen: Second,
navigationOptions: {
headerMode: "none",
header: null
}
}
},
{
initialRouteName: "Drawer"
}
);
const AppDrawerNavigator = createDrawerNavigator({
Login: { screen: LoginScreen },
})Stack Overflow用户
发布于 2019-04-08 13:08:56
也在react导航中通过第二个屏幕的路线，然后您就可以导航到第二个屏幕
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55557773
复制相关文章
相似问题
腾讯云开发者
