react-native使用react-navigation进行页面跳转导航的示例

首先要确认已经配置好react-native的环境。

# 创建一个native应用，simpleapp，然后进入项目目录
react-native init simpleapp
cd simpleapp


# 通过npm安装最新版本的react-navigation
npm install --save react-navigation


# 运行程序
react-native run-android

引入stack navigator

对于我们的应用程序，我们想要使用堆栈式导航器，因为我们想要一个概念的“堆栈”导航，其中每个新屏幕都放在堆栈顶部，然后从堆栈顶部移除一个屏幕。

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

屏幕的title在静态导航选项中是可配置的，在这里可以设置许多选项来配置导航器中的屏幕显示。

添加一个新的屏幕

 class chatscreen extends react.component {
 static navigationoptions = {
  title: 'chat with lucy',
 };
 render() {
  return (
   <view>
    <text>chat with lucy</text>
   </view>
  );
 }
}

然后在homescreen添加一个按钮，链接到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')}
     title="chat with lucy"
    />
   </view>
  );
 }

最后将添加的两个页面添加到stacknavigator中

 const simpleapp = stacknavigator({
 home: { screen: homescreen },
 chat: { screen: chatscreen },
});

在这里，可以传递参数，从homescreen传递

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接收参数

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

添加第三个页面，three.js， chatscreen跳转到three

 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;

修改chatscreen的配置

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>

);

}

}

最后的结果如下：

 

 

 

最后给出完整代码

文件 index.android.js

import simpleapp
from './app';

文件app.js

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

文件three.js

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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。