从零学React Native之03页面导航
React 页面 导航 native 03 零学
2023-09-27 14:24:59 时间
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机
本篇主要介绍页面导航
上一篇文章给大家介绍了简单界面的搭建, 这一篇我们需要两个界面, 一个是注册界面,一个是注册信息界面. 当然我们还需要一个组件去控制两个界面的切换.
每个界面其实就一个组件 , 可以
let Dimensions = require(Dimensions);// 宽高 let totalWidth = Dimensions.get(window).width; //声明了三个变量,根据屏幕动态变化 let leftStartPoint = totalWidth * 0.1; let componentWidth = totalWidth * 0.8; class RegisterLeaf extends Component { //构造函数, 组件创建的时候会执行 constructor(props) { super(props); //必须有这句代码 父组件向子组件传递属性, 比如styles属性等 // 声明状态机的初始值 this.state = { inputedNum: , inputedPw: // ES6中使用的方法需要绑定this, 否则方法中不能使用this this.userPressConfirm=this.userPressConfirm.bind(this); // 定义函数 updateNum(newText) { this.setState((state)= { return { inputedNum: newText // 定义函数 updatePW(newText) { this.setState(()= { // 用不到的参数也可以不用写 return { inputedPw: newText userPressConfirm(){ console.log("userPressConfirm"); this.props.navigator.push({ phoneNumber:this.state.inputedNum, userPW:this.state.inputedPw, name:waiting // 绘制渲染的控件 render() { return ( /*(newText)= this.updateNum(newText) 它将收到的字符串为参数调用当前组件的updateNum函数,并且将updateNum函数的返回值返回 当前函数在输入框文本变化的时候会调用 语句可以改成 this.updateNum 但一定不要写成 this.updateNum(newText) 因为有右箭头函数的时候newText是形式参数 没有箭头函数的时,newText就没有定义 View phone-pad} placeholder={请输入手机号} onChangeText={(newText)= this.updateNum(newText)}/ Text 请输入密码 onChangeText={(newText)= this.updatePW(newText)}/ Text white numberInputStyle: { top: 20, // top left表示从父组件的顶端(左侧) 向下(向右) 多少位置显示 left: leftStartPoint, // height:30, // IOS开发需要加上该高度 width: componentWidth, backgroundColor: gray, fontSize: 20 textPromptStyle: { top: 30, left: leftStartPoint, // // height:30, // IOS开发需要加上该高度 因为IOS中TextInput不会自动设置高度 width: componentWidth, fontSize: 20 passwordInputStyle: { top: 50, left: leftStartPoint, width: componentWidth, backgroundColor: gray, fontSize: 20 bigTextPrompt: { top: 70, left: leftStartPoint, width: componentWidth, backgroundColor: gray, color: white, textAlign: center,//位置居中显示 fontSize: 60 module.exports=RegisterLeaf;
let RegisterLeaf = require(./RegisterLeaf); let WaitingLeaf = require(./WaitingLeaf); class NaviModule extends Component { constructor(props){ super(props); //返回一个绑定好this的方法并存储于当前实例中 this.handleBack=this.handleBack.bind(this); //告知Navigator 模块切换时的效果, 名字要和Navigator组件的configureScene保持一致 configureScene(route) { return Navigator.SceneConfigs.FadeAndroid; // 告知Navigator模块我们希望如何挂接当前的视图 函数名保持一致 renderScene(router, navigator) { console.log("renderScene"); Navigator.navigator = navigator; switch (router.name) { case "register": // 当声明路径为register 加载 RegisterLeaf模块 return RegisterLeaf navigator={navigator}/ case "waiting": //当声明路径为Waiting 加载 Waiting模块 console.log("waiting"); return WaitingLeaf phoneNumber={router.phoneNumber} userPW={router.userPW} navigator={navigator}/ // 挂载的时候调用 componentDidMount() { console.log("componentDidMount"); //监听Android 返回键按下时,判断导航的路径长度是否大于1 大于1 表示当前视图下最少还有一个视图 BackAndroid.addEventListener(hardwareBackPress,this.handleBack); handleBack(){ const navigator = Navigator.navigator; console.log(navigator); if (navigator navigator.getCurrentRoutes().length 1) { navigator.pop(); // 返回上一个视图 return true; // 返回true 表示已经处理了事件 return false; // 移除的时候调用 componentWillUnMount() { console.log("componentWillUnMount"); //清除组件被挂载接时设置的后退事件监听器 BackAndroid.removeEventListener(hardwareBackPress,this.handleBack); render() { return ( Navigator initialRoute={{name:register}} configureScene={this.configureScene} renderScene={this.renderScene}/ // 注册了 NaviModule 组件 AppRegistry.registerComponent(AwesomeProject, () = NaviModule);
于连林520wcf 【爱上Android】作者,从事Android开发和教育多年,担当多个重点项目的负责人,项目涉及办公类、O2O、医疗等多元化类型,曾在培训机构从事Android教育多年,有上千课时讲课经验。
let Dimensions = require(Dimensions);// 宽高 let totalWidth = Dimensions.get(window).width; //声明了三个变量,根据屏幕动态变化 let leftStartPoint = totalWidth * 0.1; let componentWidth = totalWidth * 0.8; class RegisterLeaf extends Component { //构造函数, 组件创建的时候会执行 constructor(props) { super(props); //必须有这句代码 父组件向子组件传递属性, 比如styles属性等 // 声明状态机的初始值 this.state = { inputedNum: , inputedPw: // ES6中使用的方法需要绑定this, 否则方法中不能使用this this.userPressConfirm=this.userPressConfirm.bind(this); // 定义函数 updateNum(newText) { this.setState((state)= { return { inputedNum: newText // 定义函数 updatePW(newText) { this.setState(()= { // 用不到的参数也可以不用写 return { inputedPw: newText userPressConfirm(){ console.log("userPressConfirm"); this.props.navigator.push({ phoneNumber:this.state.inputedNum, userPW:this.state.inputedPw, name:waiting // 绘制渲染的控件 render() { return ( /*(newText)= this.updateNum(newText) 它将收到的字符串为参数调用当前组件的updateNum函数,并且将updateNum函数的返回值返回 当前函数在输入框文本变化的时候会调用 语句可以改成 this.updateNum 但一定不要写成 this.updateNum(newText) 因为有右箭头函数的时候newText是形式参数 没有箭头函数的时,newText就没有定义 View phone-pad} placeholder={请输入手机号} onChangeText={(newText)= this.updateNum(newText)}/ Text 请输入密码 onChangeText={(newText)= this.updatePW(newText)}/ Text white numberInputStyle: { top: 20, // top left表示从父组件的顶端(左侧) 向下(向右) 多少位置显示 left: leftStartPoint, // height:30, // IOS开发需要加上该高度 width: componentWidth, backgroundColor: gray, fontSize: 20 textPromptStyle: { top: 30, left: leftStartPoint, // // height:30, // IOS开发需要加上该高度 因为IOS中TextInput不会自动设置高度 width: componentWidth, fontSize: 20 passwordInputStyle: { top: 50, left: leftStartPoint, width: componentWidth, backgroundColor: gray, fontSize: 20 bigTextPrompt: { top: 70, left: leftStartPoint, width: componentWidth, backgroundColor: gray, color: white, textAlign: center,//位置居中显示 fontSize: 60 module.exports=RegisterLeaf;
注册展示信息的代码
let RegisterLeaf = require(./RegisterLeaf); let WaitingLeaf = require(./WaitingLeaf); class NaviModule extends Component { constructor(props){ super(props); //返回一个绑定好this的方法并存储于当前实例中 this.handleBack=this.handleBack.bind(this); //告知Navigator 模块切换时的效果, 名字要和Navigator组件的configureScene保持一致 configureScene(route) { return Navigator.SceneConfigs.FadeAndroid; // 告知Navigator模块我们希望如何挂接当前的视图 函数名保持一致 renderScene(router, navigator) { console.log("renderScene"); Navigator.navigator = navigator; switch (router.name) { case "register": // 当声明路径为register 加载 RegisterLeaf模块 return RegisterLeaf navigator={navigator}/ case "waiting": //当声明路径为Waiting 加载 Waiting模块 console.log("waiting"); return WaitingLeaf phoneNumber={router.phoneNumber} userPW={router.userPW} navigator={navigator}/ // 挂载的时候调用 componentDidMount() { console.log("componentDidMount"); //监听Android 返回键按下时,判断导航的路径长度是否大于1 大于1 表示当前视图下最少还有一个视图 BackAndroid.addEventListener(hardwareBackPress,this.handleBack); handleBack(){ const navigator = Navigator.navigator; console.log(navigator); if (navigator navigator.getCurrentRoutes().length 1) { navigator.pop(); // 返回上一个视图 return true; // 返回true 表示已经处理了事件 return false; // 移除的时候调用 componentWillUnMount() { console.log("componentWillUnMount"); //清除组件被挂载接时设置的后退事件监听器 BackAndroid.removeEventListener(hardwareBackPress,this.handleBack); render() { return ( Navigator initialRoute={{name:register}} configureScene={this.configureScene} renderScene={this.renderScene}/ // 注册了 NaviModule 组件 AppRegistry.registerComponent(AwesomeProject, () = NaviModule);
Navigator组件中configureScene函数的用途是告知Navigator模块我们希望在视图转换时使用何种效果。
renderScene函数用来告知Navigator模块我们希望如何挂接当前的视图.
componentDidMount和 componentWillUnmount函数是React框架的两个生命周期的函数,NaviModule组件实现了这两个函数后,当这个组件被挂接到当前页面或者被移除时,这两个函数会被调用.
当navigator的push函数(或者replace函数,区别见代码注释) 被调用后,通过React Native的Navigator组件的工作机制,NaviModule的renderScene函数将被调用,并且push函数传入的变量成为renderScene函数的第一个参数.
当name等于 waiting时, 将WaitingLeaf模块挂接上去. 当name等于register时, RegisterLeaf模块被挂载上去.
本节对属性做一个总结, 属性用于React Native组件外界向组件内传递变量或者数据.通过this.props属性来访问. 当属性的取值在组件外界被改变时,如果属性被组件中的UI以某种方式显示出来,则显示也会相应的发生改变. 在React Native组件内部,我们不可用对属性进行赋值操作,这种做法会导致运行时出错.
于连林520wcf 【爱上Android】作者,从事Android开发和教育多年,担当多个重点项目的负责人,项目涉及办公类、O2O、医疗等多元化类型,曾在培训机构从事Android教育多年,有上千课时讲课经验。
相关文章
- React Native 加载H5页面
- react-router v6新特性总结
- React 生命周期:方法和钩子解释 The React lifecycle: methods and hooks explained
- react基础语法(二)常用语法如:样式 ,自定义属性,常用表达式
- 对于vue和react“页面间”传递数据的理解误区
- React 监听页面滚动,界面动态显示
- ts:react中使用ts遇到的坑总结
- Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
- 可能是你需要的react + typescript 50条规范和经验
- 函数化的React Hooks
- 必须要会的 50 个React 面试题(下)
- Webpack懒加载React Router的页面组件
- React-Native 屏幕适配的问题
- react navigation返回到任意页面(不集成redux)
- 在react-native的项目中跳转到原生iOS页面
- React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用
- React Native之 ScrollView
- react-native试玩(34)全
- React Native 开发中利用节流和防抖优化页面性能
- React router动态加载组件-适配器模式的应用
- React-Router传参取值页面跳转
- React Native开源项目-贷贷助手客户端
- [React Native]使用导航器跳转页面