首先要确认已经配置好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;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
asp.net中ajax和一般处理程序（handler.ashx）的交互
egg.js创建项目，目录介绍，简单使用，sequelize mysql使用
网友评论