欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-28 23:49:25
首先要确认已经配置好react-native的环境。 # 创建一个native应用,simpleapp,然后进入项目目录 react-native init...

首先要确认已经配置好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>

);

}

}

最后的结果如下:

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

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

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

最后给出完整代码

文件 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;

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