react-native使用react-navigation進行頁面跳轉導航的示例

# 創建一個native應用，SimpleApp，然后進入項目目錄
react-native init SimpleApp
cd SimpleApp


# 通過npm安裝最新版本的react-navigation
npm install --save react-navigation


# 運行程序
react-native run-android

 import React from 'react';
import {
 AppRegistry,
 Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
 static navigationOptions = {
 title: 'Welcome world',
 };
 render() {
 return <Text>Hello, Navigation!</Text>;
 }
}

const SimpleApp = StackNavigator({
 Home: { screen: HomeScreen },
});

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

 class ChatScreen extends React.Component {
 static navigationOptions = {
 title: 'Chat with Lucy',
 };
 render() {
 return (
 <View>
 <Text>Chat with Lucy</Text>
 </View>
 );
 }
}

 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>
 );
 }

 const SimpleApp = StackNavigator({
 Home: { screen: HomeScreen },
 Chat: { screen: ChatScreen },
});

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>
 );
 }
}

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>
 );
 }
}

 import React,{Component} from 'react';
import {
 AppRegistry,
 Text,
 View,
 Button,
} from 'react-native';

class Three extends React.Component {
 static navigationOptions = {
 title: 'Three Sceen',
 };
 render() {
 const { goBack } = this.props.navigation;
 return (
 <Button
 title="Go back"
 onPress={() => goBack()}
 />
 );
 }
}
export default Three;

class ChatScreen
extends React.Component {

static navigationOptions = {

title: 'Chat with Lucy',

};

render() {

const { navigate } =
this.props.navigation;

return (

<View>

<Text>Chat with Lucy</Text>

<Button

onPress={() =>
navigate('Three')}

title="to to ThreeScreen"

/>

</View>

);

}

}

import SimpleApp
from './App';

import React
from 'react';

import {

AppRegistry,

Text,

View,

Button,

} from 'react-native';

import { StackNavigator }
from 'react-navigation';

import ThreeScreen
from './Three.js';

 

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>

);

}

}

 

class ChatScreen
extends React.Component {

static navigationOptions = {

title: 'Chat with Lucy',

};

render() {

const { navigate } =
this.props.navigation;

return (

<View>

<Text>Chat with Lucy</Text>

<Button

onPress={() =>
navigate('Three')}

title="to to ThreeScreen"

/>

</View>

);

}

}

 

const SimpleApp =
StackNavigator({

Home: { screen:
HomeScreen },

Chat: { screen:
ChatScreen },

Three: { screen:
ThreeScreen},

});

 

AppRegistry.registerComponent('SimpleApp', ()
=> SimpleApp);

import React,{Component}
from 'react';

import {

AppRegistry,

Text,

View,

Button,

} from 'react-native';

 

class Three
extends React.Component {

static navigationOptions = {

title: 'Three Sceen',

};

render() {

const { goBack } =
this.props.navigation;

return (

<Button

title="Go back"

onPress={() =>
goBack()}

/>

);

}

}

export default
Three;