王学岗ReactNative开发4——props约束性检查和ref绑定机制和Navigator导航详解

最新推荐文章于 2023-04-26 11:52:09 发布
最新推荐文章于 2023-04-26 11:52:09 发布
阅读量246 收藏
点赞数
分类专栏： ReactNative
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qczg_wxg/article/details/88980775
版权

一：props的约束性检查
ReactNative是一个弱类型的语言，类型检查做的非常差，编译的时候并不知道类型是什么，可能导致运行的时候出问题，比如我传入的是一个字符串，接收的可能是一个字符，编译的时候没有问题，运行的时候却会出问题。
props是一个传递的载体，是一个变量，这里面有许多属性，属性就必须要有一些类型。
props有一个技术，叫做类型约束检查
新建PropsTest文件

import React, {Component } from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import PropTypes from 'prop-types';
export default class PropsTest extends  Component{
    constructor(props) {
        super(props);
    }
    //假设这个父组件没有把传进来，name默认叫做David
    static defaultProps={
        name:"David"
    }
    //类型检查，所有的类型检查的名字都必须写成propTypes
    //isRequired表示必须传入的参数
    static propTypes={
        name:PropTypes.string,
        age:PropTypes.number,
        sex:PropTypes.string.isRequired,
    }
    //父组件向子组件传参数，子组件在进行类型检查
    render()  {
        {/*
      返回一个View，View里面传递姓名，年龄，性别
      */
        }
        return (<View>
            {/*
            render里面返回的是一个布局，布局里面不能出现裸变量，必须要有花括号{}包裹住
            */}
            {/*
            我们从props中取出name，刚开始的时候name肯定是不存在的，我们并
            没有声明name，这个name是
            从父组件传递进来的
            */}
            <Text>姓名: {this.props.name}</Text>
            <Text>age: {this.props.age}</Text>
            <Text>sex: {this.props.sex}</Text>
        </View>);
    }
}

App.js文件进行修改

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

import PropsTest from './PropsTest'

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
      return (
          {/*
          1，不仅要传参，还要做性能约束
          2，字符串可以这么写name="river"，数字类型必须加{}：age={11}
          3，这里我们传入了三个参数，传到了PropsTypes这个组件的props变量里了
          4，我们这里age需要传入数字类型，但是我们现在就算是传入字符串也不会报错，
          该怎么办呢？我们可以 在接收的组件里进行类型检查
          5，我们传的值无论是变量，还是函数，还是监听，都要写在标签里面，
          使用空格隔开
          */}
          <PropsTest name="river" age={11} sex="男"></PropsTest>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

看下运行效果
在这里插入图片描述
如果我们在 中，age传入字符串，在运行的话会出现这种问题
在这里插入图片描述
二ref详解
android中通过findViewById绑定控，React Native也需要绑定组件，这就是ref机制
。
通过在组件中加入ref=“某个字符串”，就可以定义一个组件的引用，类似于在android布局中xml标签的id属性
它有三种写法
在这里插入图片描述
1，第一种方式：我们新建RefTest.js文件

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import PropTypes from 'prop-types';

export default class RefTest extends Component {
    constructor(props) {
        super(props);
        this.state={
            size:100
        }
    }
    //定义一个方法，方便在外界调用
    getSize(){
        //返回内部的state里面有一个变量叫size
        return this.state.size;
    }
    render(): React.ReactNode {
        return <Text>我叫陈商</Text>;
    }
}

我们看下App.js文件，这是第一种写法

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

import RefTest from './RefTest'

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state={
            size:0
        }
    }
    render() {
        return (
            <View>
                //stytle标签一定是有两个括号
                //onpress为按钮事件，单击<Text/>的时候获取当前的组件
                <Text style={{fontSize: 20}} onPress={()=>{
                    //1，声明一个变量去接收
                    //2，this.refs.refTest就相当于findViewById(),返回的是一个控件，
                    // 这个控件里有getSize();
                    var s=this.refs.refTest.getSize();
                    //给state赋值,这时size由0变为100
                    this.setState({size:s});
                }}>
                    {this.state.size}
                </Text>
                <RefTest ref="refTest"></RefTest>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

在这里插入图片描述
2，第二种方式
ref不在接收一个字符串，而是接收一个{}
我们修改下App.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

import RefTest from './RefTest'

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        //创建refTest
        this.refTest=React.createRef();
        this.state={
            size:0
        }
    }
    render() {
        return (
            <View>
                //stytle标签一定是有两个括号
                //onpress为按钮事件，按钮的时候同事获取当前的组件
                <Text style={{fontSize: 20}} onPress={()=>{
                    //这里直接
                    var s=this.refTest.getSize();
                    //给state赋值
                    this.setState({size:s});
                }}>
                    {this.state.size}
                </Text>
                //1，这里的=>是一个回调函数，aaa是返回值因为return语句只有一句话，所以写成this.refTest=reftest
                //2,当dom解析完成之后，ref就会回调该函数，并将值返回给refTest
                <RefTest ref={aaa=>this.refTest=aaa}></RefTest>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

运行效果与第一种方式一模一样
第三种方式与第一种方式类似，我这里就不演示了。
注意不能再构造方法中试图获取ref
三封装对象
React Native是一种面向对象性语言，那么如何声明一个类呢？就是使用class关键字

export  default class Student{

    constructor(name,sex,age) {
        this.name=name;
        this.sex=sex;
        this.age=age;
    }
    getDescription(){
        return "姓名： " + this.name + "   性别：  " + this.sex + "   年龄  " + this.age;
    }

}

四：导航栏
在android中实现导航栏可以使用切换界面，但是ReactNative将导航栏功能抽出来了，用于导航最知名的库是react-navigation,如果你要使用导航栏需在命令行中安装。
导航栏有三种导航形式：
Drawer Navigation,侧滑栏
Stack Navigation,
Tab Navigator
安装导航栏的命令
npm install --save react-navigation
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

qczg_wxg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React之Props研究
weixin_49421056的博客
04-06 206
1.props.children const App = (props) => { return <div>{props.children}</div>; }; const Btn = (props) => { return <button>按钮</button>; }; ReactDOM.render( <App> <p>我是Children</p> <Btn></
React Native 的 Navigator 组件(导航功能)
小毅哥哥的博客
06-20 787
在0.44版本之前和之后的方法是不同的,有时候回出现以下问题: ‘Navigator is deprecated and has been removed from this package. It can now be installed ’ + ‘and imported from react-native-deprecated-custom-
Navigator的教程
大灰狼的小绵羊哥哥的博客
04-19 1984
下面是一个简单的例子，用Navigator来跳转页面，页面之间传递参数 (代码是ES6语法写的): import React from 'react'; import { View, Navigator } from 'react-native'; import FirstPageComponent from './FirstPageCo
ORACLE约束总结
weixin_33919941的博客
05-13 163
你对ORACLE约束的了解如何？比较模糊还是相当透彻？如果你对下面几个问题了如指掌的话，恭喜你，你已经对约束掌握得比较好了，不用看这篇文章了。ORACLE的约束有啥功能作用？ 有哪些类型约束（不同版本ORACLE是否不同）？视图有约束吗？约束是否会影响SQL性能？ 约束信息存储在哪些系统视图、数据字典中？约束能否修改名称？能否禁用约束？延迟约束有啥好处.......   约束定义 约束是强加...
React再学习4_ref使用和约束
子敬的技术博客
09-05 265
React再学习4 Ref自定义属性 ref相当于当前dom节点的引用，给他命名下，然后再需要的时候世界从refs中调用，然后对其进行操作。 我们也可以写成这样 直接给当前的dom命名，然后我们都不用经过refs就能直接用了   约束性和非约束性的组件 约束性：由react接管了value value值受到状态的限制 非约束性：有原生的DOM接管 value值是默认的d...
ReactNative中props使用详解共4页.pdf
10-30
在ReactNative中，`props`（属性）是传递数据和功能从父组件到子组件的关键机制，这是React开发的基础概念，同样适用于ReactNative。 1. **什么是props** 在React和ReactNative中，props是父组件传递给子组件的...
React-Native中props具体使用详解
08-29
React-Native中props的详细使用解释 React-Native中的props是为了描述一个组件的特征而存在的，它是父组件传递给子组件的。props是属性的简称，用于描述组件的特征。 props的使用方式： 1. props的基本使用 在...
06 React表单详解 约束性和非约束性组件 以及获取表单的内容
最新发布
03-01
本篇将深入探讨React中的表单管理，包括约束性和非约束性组件，以及如何获取表单的内容。 首先，我们要了解React表单的两种基本处理方式：约束性和非约束性组件。 **1. 约束性组件（Controlled Components）** 在...
react高阶组件添加和删除props
10-17
本文深入探讨了React中的高阶组件（HOC）如何用于动态地向传入组件添加或删除props属性。高阶组件是React中一种强大且灵活的模式，用于复用组件逻辑。本文的示例代码很好地展示了这一概念，并通过具体的例子演示了...
Navigator带参数测试
jiantsing的专栏
11-22 2181
1.index.android.js /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ 'use strict'; import React, {   Component } from 'react'; import {
5.5 Vue中的ref引用机制
蚊者逆袭的博客
04-26 888
Vue 的 ref 是一种引用机制，通过给元素或组件指定 ref 属性，可以在 Vue 实例中访问到对应的元素或组件实例。
react 对props进行类型限制 props-type
yeee1128的博客
03-21 1404
react进行组件传值时，对props类型进行限制,在接收值的组件进行类型限制 1.引入 import PropsType from 'props-type'
转 ORACLE约束总结
weixin_34253539的博客
07-09 173
https://www.cnblogs.com/kerrycode/archive/2012/05/13/2454614.html 你对ORACLE约束的了解如何？比较模糊还是相当透彻？如果你对下面几个问题了如指掌的话，恭喜你，你已经对约束掌握得比较好了，不用看这篇文章了。ORACLE的约束有啥功能作用？ 有哪些类型约束（不同版本ORACLE是否不同）？视图有约束吗？约束是否会影响SQL性...
TabNavigator使用心得
菜刀
03-17 282
做了一个控件很长时间，一直有两个问题困扰我。 1.        使用TabNavigator控件的第2个视图不点击就无法使用。 2.        Flex Debug无法使用跟踪 我的业务逻辑： 用户使用控件顺序，点击连接—》开始－》停止，当点击“开始”后，我的TabNavigator就要自动跳转第二个视图，显示直播过程中的信息。 问题原因： 由于”导航条容器内置推迟实例化”，导致每...
TabNavigator简单属性（慢慢更新）
海上的雨
05-17 1336
TabNavigator简单属性
React Native ref高级用法&&setNativeProps使用
热门推荐
Que_Li的博客
10-20 1万+
ref属性不只是string ref属性不仅接受string类型的参数，而且它还接受一个function作为callback。这一特性让开发者对ref的使用更加灵活。 render() { return <TextInput ref={(c) => this._input = c} />; }, componentDidMount() { this._input.focus
C#之Action/Func/out/ref/params/类型参数约束
胡胜同学
04-17 6906
C#之Action/Func/out/ref/params/类型参数约束 Action的用法： using System; using System.Collections.Generic; class Program { /// /// 输出字符串 /// static void PrintString() { Console.W
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值