分类：React Native

ReactNative中的PropTypes

Overview

Runtime type checking for React props and similar objects.

You can use prop-types to document the intended types of properties passed to components. React (and potentially other libraries—see the checkPropTypes() reference below) will check props passed to your components against those definitions, and warn in development if they don’t match.

1. 在RN中主要用于自定义组件属性的类型限定,或者叫做属性确认,当外部传入非法的属性类型,会有警告(不是IDE，而是控制台)。
2. 网上说使用PropTypes定义的属性，会有提示。(然而我试了Atom & WebStorm，IDE并没有提示)

重大变更记录

在React v15.5,PropTypes被从react库中拿了出来,单独放在了一个名为prop-types的库中.

导入方式

• React v15.5之前,PropTypes属于react库.

import { PropTypes } from 'react';

• React v15.5开始,react库移除了PropTypes,转而使用prop-types库替代.

import PropTypes from 'prop-types';

使用方式

• React v15.5`之前

static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
    };  // 注意这里有分号

• React v15.5开始

static propTypes = {
        autoPlay: PropTypes.bool.isRequired,
        maxLoops: PropTypes.number.isRequired,
    };  // 注意这里有分号

---

Others

1. PropTypes从react库移除之后,会导致老项目报错(属性找不到).
2. RN的版本更新很快,目前已经是0.51.0,随着React Native的升级，系统废弃了很多的东西，过去我们可以直接使用 React.PropTypes来进行属性确认，不过这个自React v15.5起就被移除了，转而使用prop-types库来进行替换.
3. 为了保证RN代码高效运行,属性确认仅在开发环境中有效,正式发布的 App 运行时是不会进行检查的.

TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。

假如我们要实现当用户输入时，实时将其以单词为单位翻译为另一种文字。我们假设这另一种文字来自某个吃货星球，只有一个单词： 🍕。所以”Hello there Bob”将会被翻译为”🍕🍕🍕”。

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
    constructor(props) {
        super(props);
        this.state = {text: ''};
    }

    render() {
        return (
            <View style={{padding: 10}}>
                <TextInput
                    style={{height: 40}}
                    placeholder="Type here to translate!"

                    // 写法一
                    onChangeText={(text) => this.setState({text})}
                    // 写法二
                    onChangeText={(sqi_text) => this.setState({text: sqi_text})}
                    // 写法三
                    onChangeText={
                        (sqi_text) => {this.setState(
                            (sqi_priviousStatus) => {
                                return {text: sqi_text};
                            }
                        );}
                    }
                />
                <Text style={{padding: 10, fontSize: 42}}>
                    {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
                </Text>
            </View>
        );
    }
}

以上是ReactNative中文网中给出的处理文本输入的教程, 但是这个示例代码对于初学者来说真的很糟糕, 其中onChangeText属性值得第一种写法为ReactNative中文网给出的代码, 下面两种是我自己添加的两种写法, 说实话, 第一种写法真的让我这个初学者很懵逼…