React Native的props

前言

在React的世界里，界面是由一个个Component拼出来的。当我们需要渲染一个界面时，以<View>为父控件。<Text>或自定义的<CustomText>为子控件。在渲染时，我们一定希望对子控件传递一些参数。props就可以让我们在控件中，获取来自父控件的参数。

一个例子

现在我们尝试实现一个让字符串反转的<Text>。

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

class ReverseText extends Component {

  render(){
    // 获取上层传入的 text
    var srcStr = this.props.text; 
    // 反转字符串
    var reverseStr = srcStr.split("").reverse().join("");
    // 返回渲染结果
    return <Text>{reverseStr}</Text>
  }
}

// 输出控件
export default ReverseText;

我们自行实现了一个让字符串反转的类。可以看到，在render方法的第一行，我们就通过props从上层取到了需要反转的字符串。这个结构清晰易懂，不再赘述。

接下来我们看一看，外层如何调用这个ReverseText。

import React, { Component } from 'react';
import {
  AppRegistry,


} from 'react-native';

import ReverseText from '../AwesomeProject/App/widget/ReverseText'

class HelloWorld extends Component {
  render(){
    return (
      <ReverseText text='Where must we fly'></ReverseText>
    )
  }
}

AppRegistry.registerComponent('AwesomeProject', () => HelloWorld);

可以看到，我们在外层引入了ReverseText。
然后通过<ReverseText text='Where must we fly'></ReverseText>将需要反转字符串输入其中。

结果

image.png

如有问题，欢迎指正。