[英]Routing with React-Native
I have a HomePage.js
with only one button, Login Button, and when clicked I want to render LoginPage.js
. 我有一个只有一个按钮,“登录”按钮的
HomePage.js
,当单击时,我要呈现LoginPage.js
。 I tried something like this but it's not working: 我尝试了类似的方法,但是它不起作用:
HomePage.js
: HomePage.js
:
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';
class HomePage extends Component{
constructor () {
super();
this.state = {LoginPage:false};
}
showLogin = () => {
this.setState({LoginPage:true});
}
render() {
return(
<View>
<TouchableOpacity onPress={() => this.showLogin()}>
<Text>LogIn</Text>
</TouchableOpacity>
</View>
)
}
}
export default HomePage;
In React it's easily done with react-router
but I don't know how to do it with React-Native. 在React中,它很容易用
react-router
完成,但是我不知道如何用React-Native来完成。
EDIT 1
after including react-navigation
I get the following error: Route 'navigationOptions' should declare a screen
. 包括
react-navigation
之后的EDIT 1
我得到以下错误: Route 'navigationOptions' should declare a screen
。 Did I miss something? 我错过了什么?
App.js
: App.js
:
import React, {Component} from 'react';
import {StackNavigator} from 'react-navigation';
import HomePage from './HomePage';
import LoginPage from './LoginPage';
const App = StackNavigator({
Home: {screen: HomePage},
LoginPage: {screen: LoginPage},
navigationOptions: {
header: () => null,
}
});
export default App;
HomePage.js
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';
class HomePage extends Component{
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return(
<View>
<TouchableOpacity onPress={() => navigate('LoginPage'), { name: 'Login' }}>
<Text>Login</Text>
</TouchableOpacity>
<Button
onPress={() => navigate('LoginPage'), { name: 'Login' }}
>Log In</Button>
</View>
)
}
}
export default HomePage;
LoginPage.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class LoginPage extends Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
return (
<View>
<Text>This is login page</Text>
</View>
);
}
}
export default LoginPage;
Use React Navigation . 使用React Navigation 。 Its the best and simple solution right now for react native.
它是目前响应本机的最好,最简单的解决方案。
for adding the library use npm install --save react-navigation
用于添加库,请使用
npm install --save react-navigation
You can define class for routing like below using a StackNavigator. 您可以使用StackNavigator定义用于路由的类,如下所示。
import {
StackNavigator,
} from 'react-navigation';
const BasicApp = StackNavigator({
Main: {screen: MainScreen},
Profile: {screen: ProfileScreen},
, {
headerMode: 'none',
}
});
Then u can define classes like the one u mentioned in the question. 然后,您可以定义类似问题中提到的类的类。 eg:
例如:
class MainScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'Jane' })
}
/>
);
}
}
and second class 第二等
class ProfileScreen extends React.Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
const { goBack } = this.props.navigation;
return (
<Button
title="Go back"
onPress={() => goBack()}
/>
);
}
}
The navigate function can be used for navigating to a class and goBack can be used for going back to a screen. 导航功能可用于导航至课程,而goBack可用于返回至屏幕。
For hiding header u can use header mode or specify navigation options in each screen 要隐藏标题,您可以使用标题模式或在每个屏幕中指定导航选项
For details please refer : https://reactnavigation.org/ 有关详细信息,请参阅: https : //reactnavigation.org/
If you're just looking for a plugin like react-router
to use on React Native, you can use react-native-router-flux
, available here: https://github.com/aksonov/react-native-router-flux . 如果您只是在寻找像React
react-router
这样的插件以在React Native上使用,则可以使用react-native-router-flux
,可从以下位置获得: https : //github.com/aksonov/react-native-router-flux 。
Also, it's better if you just put a reference to the function in there instead of invoking it. 另外,最好是在其中放置对函数的引用而不是调用它。 Something like:
就像是:
<TouchableOpacity onPress={this.showLogin}>...</TouchableOpacity>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.