页面跳转
页面 跳转
2023-09-27 14:27:34 时间
使用Navigation实现界面导航与跳转
首先安装导航库
npm install --save react-navigation
如果提示如下信息
npm WARN enoent ENOENT: no such file or directory, open '***\nodejs \package.json' npm
则进入到node_modules目录下进行安装
在index.js 中配置应用的首页
AppRegistry.registerComponent(appName, () => App);
//App是首页js的名字,首页是用来进行初始化配置的,如配置Navigator导航等
App首页配置Navigator
export default class App extends React.Component{
//构造,初始化值可以写在这里
constructor(props) {
super(props);
this.state={};
}
render(){
let defaultName='HomePage';
let defaultComponent=HomePage;
return(
<Navigator
//配置初始页及第一个页面
initialRoute={{name:defaultName,component:defaultComponent}}
//页面加载的动画
configureScene={
(route)=>{
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}
}
//配置导航的props属性navigator,其它页面也可以直接通过this.props.navitagor获取navigator
renderScene={
(route,navigator)=>{
let Component=route.component
return <Component {...route.param} navigator={navigator}/>
}
}
/>
);
}
}
页面间跳转
HomePage页面
export default class HomePage extends Component<Props> {
constructor(props) {
super(props);
this.state = {};
}
//点击跳转,方法名定义:方法名(){}
_onPress() {
const {navigator} = this.props;
if (navigator) {
navigator.push({
name:"Second",
component:Second,
})
}
}
render() {
return (
<View style={styles.container}>
<Button style={styles.welcome} title="Welcome to React Native" onPress={this._onPress.bind(this)}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
Second页面
export default class Second extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
}
_onBack(){
const {navigator}=this.props;
if(navigator){
navigator.pop();
}
}
render() {
return (
<View style={styles.container}>
<Button style={styles.container} onPress={this._onBack.bind(this)} title="Chat界面,点击返回"/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
})
相关文章
- 详解Git合并(Merge)错误如何回退。(包括Reset, Revert和页面回滚三种,并说明其优缺点)
- 微信公众号跳转uni h5页面 登录 获取 code openId accesstoken
- JSP页面乱码全解析
- 使用CSS里的user-select属性控制用户在页面上选中的内容
- 通过js操作上传图片,直接在页面显示
- php开发中的页面跳转方法总结
- php三中页面跳转方式(header、location、refresh) 乐杨俊
- 等待指定时间后自动跳转或关闭当前页面
- Nginx性能优化功能- Gzip压缩(大幅度提高页面加载速度)
- springboot内置tomcat验证授权回调页面域名
- js跳转页面方法(转)
- Nginx反向代理、负载均衡、页面缓存、URL重写及读写分离详解
- nginx—基于访问IP地址跳转到对应城市页面
- 解决移动端页面点击图标或按钮产生阴影
- vue做页面按钮权限--分析
- 实现页面的后退、刷新、前进
- SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
- 创建第一个springboot项目、用springboot实现页面跳转、@Controller和@RestController的区别
- 作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户
- 实现网页页面跳转的几种方法大全(meta标签、js实现、php实现)
- vue 重置刷新页面数据(最快捷 简单的方式,全局定义)
- HarmonyOS入门|UIAbility内页面间的跳转
- php实现页面跳转方法汇总
- asp.net - GridView根据linkButton值不同跳转不同页面
- 【Google Play】从 Android 应用中跳转到 Google Play 中 ( 跳转代码示例 | Google Play 页面的链接格式 | Google Play 免安装体验 )
- 【Android 组件化】路由组件 ( 页面跳转参数依赖注入 )
- ReactNative官网例子练习(四)——页面跳转
- django 使用redis进行页面数据缓存和更新缓存数据
- ios页面跳转基础