RN基础简介

Props

大多数组件在创建时都需要用各种不同的参数来自定义，这些参数就称作props。
例如，创建一个image时，可以使用source属性进行控制图片显示。

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
 
class Bananas extends Component {
  render() {
    let pic = {  
    uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}
AppRegistry.registerComponent('Bananas', () => Bananas);

注意到：{pic}通过大括号包围，这样就把pic变量迁入到JSX语句中。通过这样方法可以把任何正确合法的JavaScript的表达式迁入到JSX中。

自定义的组件也可以使用props。可以在不同场景下，通过不同属性定制组件，最后在你的render（）方法直接通过this.props进行引用即可。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
 
class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}
 
class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }

这样就可以根据属性值不同从而复用该组件了。当然，上面也看到了一些View组件，这个View组件是其他组件的容器，可以用来帮助控制风格、样式和布局。我们可以使用props和一些基础的View,Image,Text组件，就足以编写出各式各样的UI界面了。

state

改变组件一般有两种类型的数据：props和state。
props是在父组件中进行设置，只要设置完成，该组件在声明周期中就定死。
针对数据变化修改的情况，需要使用state。

一般情况下，需要在constructor方法中进行初始化state，然后在想要修改更新的时候，调用setState方法即可。实际中，当服务器有新数据的响应，或有用户输入时，也可以使用一些例如Redux的状态容器来进行统一管理数据，而不是直接调用setState。

Style

在React Native中，定制样式只需通过JavaScript定义应用的样式。所有核心的组件都有style的属性。

在实际开发中，组件的样式可能比较复杂，推荐的常用方法是使用StyleSheet.create来在一个地方定义多种样式。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
 
class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
 
AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);