1.1 React Navigation 中文文档 Hello Mobile Navigation
安装和安装
首先,确保您都设置为使用React Native。接下来,创建一个新项目并添加:react-navigation
# Create a new React Native App
react-native init SimpleApp
cd SimpleApp
# Install the latest version of react-navigation from npm
npm install --save react-navigation
# Run the new app
react-native run-android # or:
react-native run-ios
验证您是否可以成功查看在iOS和/或Android上运行的裸示例应用程序:


我们希望分享iOS和Android的代码,所以让我们删除的内容,并与更换。index.ios.js
index.android.js
import './App';
现在,我们可以为我们的应用程序实现创建新的文件。App.js
介绍Stack Navigator
对于我们的应用程序,我们希望使用这个方法,因为我们需要一个概念性的“栈”导航,每个新屏幕都放在堆栈顶部,并返回从堆栈顶部移除一个屏幕。我们从一个屏幕开始:StackNavigator
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
在屏幕上可配置的静态,那里有很多选项可以设置来配置屏幕的呈现在导航。title
navigationOptions
现在iPhone和Android应用都会出现相同的屏幕:


添加新屏幕
在我们的文件中,我们添加一个新屏幕:App.js
ChatScreen
class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
然后,我们可以向我们的组件添加一个按钮,链接到使用。HomeScreen
ChatScreen
routeName
Chat
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
}
我们正在使用屏幕导航支柱的导航功能转到。但是,直到我们将其添加到我们这样做,这将不会起作用:ChatScreen
StackNavigator
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});
现在,您可以导航到新屏幕,然后返回:


传递参数
硬编码一个名字不是很理想。如果我们可以传递一个名称来代替,那将会更有用,所以让我们这样做。ChatScreen
除了在导航功能中指定目标之外,我们还可以传递将放入新路由的参数。首先,我们将编辑我们的组件以将参数传递到路由中。routeName
HomeScreen
user
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat', { user: 'Lucy' })}
title="Chat with Lucy"
/>
</View>
);
}
}
然后,我们可以编辑我们的组件以显示通过路由传递的参数:ChatScreen
user
class ChatScreen extends React.Component {
// Nav options can be defined as a function of the screen's props:
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
// The screen's current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
现在,您可以在导航到聊天屏幕时看到名称。尝试改变参数,看看会发生什么!user
HomeScreen

