[英]Navigation with React Native Base
I want to navigate to another screen (ie 'Details') when I hit the login button.当我点击登录按钮时,我想导航到另一个屏幕(即“详细信息”)。 This is my working main code: (could be checked on Snack Expo)
这是我的工作主要代码:(可以在 Snack Expo 上查看)
import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Title, Text, Form, Item, Input, Label} from 'native-base';
import { StackNavigator } from 'react-navigation';
import { DrawerNavigator } from "react-navigation";
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}
render() {
return (
<Container>
<Text >Instaride</Text>
<Form>
<Item floatingLabel>
<Label onChangeText={(text) => this.setState({username: text})}>Username</Label>
<Input
value={this.state.username}
onChangeText={username => this.setState({ username })}
placeholder={'Username'}
/>
</Item>
<Item floatingLabel last>
<Label >Password</Label>
<Input
value={this.state.password}
onChangeText={password => this.setState({ password })}
placeholder={'Password'}
secureTextEntry={true}
/>
</Item>
</Form>
<Left>
<Button >
<Text>Login</Text>
</Button>
<Text >Forgot Password?</Text>
</Left>
<Right>
<Button hasText transparent>
<Text>Sign Up Here</Text>
</Button>
</Right>
</Container>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<Text>Details Screen</Text>
);
}
}
class RegisterationScreen extends React.Component {
render() {
return (
<Text>sign up time</Text>
);
}
}
However, I get an error when I add this:但是,当我添加此内容时出现错误:
const HomeScreenRouter = DrawerNavigator(
{
Home: { screen: Login },
Chat: { screen: DetailsScreen },
Profile: { screen: RegisterationScreen }
}
)
I can not really figure out a way to combine all of these:我真的想不出一种方法来结合所有这些:
onPress={() => this.props.navigation.navigate("Details")}
Also, what exactly should I be exporting at the end of the code?另外,我到底应该在代码末尾导出什么?
You should do something like this to work...你应该做这样的事情来工作......
import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Title, Text, Form, Item, Input, Label} from 'native-base';
import { StackNavigator } from 'react-navigation';
import { DrawerNavigator } from "react-navigation";
import { createAppContainer } from 'react-navigation';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}
render() {
return (
<Container>
<Text >Instaride</Text>
<Form>
<Item floatingLabel>
<Label onChangeText={(text) => this.setState({username: text})}>Username</Label>
<Input
value={this.state.username}
onChangeText={username => this.setState({ username })}
placeholder={'Username'}
/>
</Item>
<Item floatingLabel last>
<Label >Password</Label>
<Input
value={this.state.password}
onChangeText={password => this.setState({ password })}
placeholder={'Password'}
secureTextEntry={true}
/>
</Item>
</Form>
<Left>
<Button >
<Text>Login</Text>
</Button>
<Text >Forgot Password?</Text>
</Left>
<Right>
<Button hasText transparent>
<Text>Sign Up Here</Text>
</Button>
</Right>
</Container>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<Text>Details Screen</Text>
);
}
}
class RegisterationScreen extends React.Component {
render() {
return (
<Text>sign up time</Text>
);
}
}
const HomeScreenRouter = createStackNavigator(
{
Details: { screen: Details },
}
)
export default createAppContainer(HomeScreenRouter);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.