学习react-native

1.一般来说，需要在constructor中初始化state，然后在需要修改时调用setState方法。

2.样式使用驼峰命名法，建议使用StyleSheet.create来集中定义组件的样式。后声明的属性会覆盖先声明的同名属性。

3.尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

4.使用flex:1来指定某个组件扩张以撑满所有剩余的空间（容器），占据剩余空间的比等于并列组件间flex值的比。

  如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

5.flexDirection默认值是竖直轴(column)方向

  alignItems可以决定其子元素沿着次轴的排列方式。注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。

6.处理文本输入：

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

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})}   //文本改变时调用函数
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}  //以空格为据切割字符串，合成一个数组。然后把每个数组元素转换为🍕，并在后面加空格
        </Text>
      </View>
    );
  }
}
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);

7.ScrollView适合用来显示数量不多的滚动元素。放置在ScollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外.而且是渲染所有元素。

   ListView并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

   ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源，而renderRow则逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染。

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

class ListViewBasics extends Component {
  // 初始化模拟数据
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});  //rowHasChanged函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据来判断某行数据是否变化了
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={this.state.dataSource}           //数据源
          renderRow={(rowData) => <Text>{rowData}</Text>}   //渲染成Text
        />
      </View>
    );
  }
}

// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);

ListView的一个常用场景就是从服务器端取回列表数据然后显示。