React Native 组件主要分为三种： 基础组件、交互组件、列表组件

基础组件

基础组件包含：

1. View：用于搭建用户组件的最基础组件
2. Text：用于显示文本的内容
3. Image：显示图片内容的组件
4. TextInput：文本显示框
5. ScrollView：可滚动的容器视图
6. StyleSheet：提供类似CSS样式表的样式抽象层

View

作为创建 UI 时最基础的组件，View 是一个支持 Flexbox 布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。

class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View
        style={{
          flexDirection: "row",
          height: 100,
          padding: 20
        }}
      >
        <View style={{ backgroundColor: "blue", flex: 0.3 }} />
        <View style={{ backgroundColor: "red", flex: 0.5 }} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

用于 View 响应属性 (例如, onResponderMove), 合成触摸事件采用以下的格式:

• nativeEvent

  • changedTouches - 从上一次事件以来的触摸事件数组。
  • identifier - 触摸事件的 ID。
  • locationX - 触摸事件相对元素位置的 X 坐标。
  • locationY - 触摸事件相对元素位置的 Y 坐标。
  • pageX - 触摸事件相对根元素位置的 X 坐标。
  • pageY - 触摸事件相对根元素位置的 Y 坐标。
  • target - 接收触摸事件的元素 ID.
  • timestamp - 触摸事件的时间标记，用来计算速度.
  • touches - 屏幕上所有当前触摸事件的数组.

  绑定View的触摸响应事件

Text

一个用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。

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

export default class TextInANest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titleText: "Bird's Nest",
      bodyText: 'This is not really a bird nest.'
    };
  }

  render() {
    return (
      <Text style={styles.baseText}>
        <Text style={styles.titleText} onPress={this.onPressTitle}>
          {this.state.titleText}{'\n'}{'\n'}
        </Text>
        <Text numberOfLines={5}>
          {this.state.bodyText}
        </Text>
      </Text>
    );
  }
}

const styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

这个例子使用了styles 样式分离的方式来制作，显示Text的相关属性。

元素在布局上不同于其它组件：在Text内部的元素不再使用flexbox布局，而是采用文本布局。这意味着内部的元素不再是一个个矩形，而可能会在行末进行折叠。

Image

TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。

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

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

  render() {
    return (
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
    );
  }
}

多行文本框

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

class UselessTextInput extends Component {
  render() {
    return (
      <TextInput
        {...this.props} // 将父组件传递来的所有props传递给TextInput;比如下面的multiline和numberOfLines
        editable = {true}
        maxLength = {40}
      />
    );
  }
}

export default class UselessTextInputMultiline extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'Useless Multiline Placeholder',
    };
  }

  // 你可以试着输入一种颜色，比如red，那么这个red就会作用到View的背景色样式上
  render() {
    return (
     <View style={{
       backgroundColor: this.state.text,
       borderBottomColor: '#000000',
       borderBottomWidth: 1 }}
     >
       <UselessTextInput
         multiline = {true}
         numberOfLines = {4}
         onChangeText={(text) => this.setState({text})}
         value={this.state.text}
       />
     </View>
    );
  }
}

ScrollView

一个封装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。

记住ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给ScrollView一个确定的高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。

ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者。

ScrollView和FlatList应该如何选择？ScrollView会简单粗暴地把所有子元素一次性全部渲染出来。其原理浅显易懂，使用上自然也最简单。然而这样简单的渲染逻辑自然带来了性能上的不足。想象一下你有一个特别长的列表需要显示，可能有好几屏的高度。创建和渲染那些屏幕以外的JS组件和原生视图，显然对于渲染性能和内存占用都是一种极大的拖累和浪费。

这就是为什么我们还有专门的FlatList组件。FlatList会惰性渲染子元素，只在它们将要出现在屏幕中时开始渲染。这种惰性渲染逻辑要复杂很多，因而API在使用上也更为繁琐。除非你要渲染的数据特别少，否则你都应该尽量使用FlatList，哪怕它们用起来更麻烦。

此外FlatList还可以方便地渲染行间分隔线，支持多列布局，无限滚动加载等等。

交互空间

Button

import { Button } from 'react-native';
...

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

Picker

本组件可以在iOS和Android上渲染原生的选择器（Picker）。

<Picker
  selectedValue={this.state.language}
  style={{ height: 50, width: 100 }}
  onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

slider

用于选择一个范围值的组件。

switch

跨平台通用的“开关”组件。

这些平台在不同的平台上的定义方式不一样，所以出现的是跨平台的相应组件。

注意这是一个“受控组件”（controlled component）。你必须使用onValueChange回调来更新value属性以响应用户的操作。如果不更新value属性，组件只会按一开始给定的value值来渲染且保持不变，看上去就像完全点不动。

@keyword checkbox @keyword toggle @keyword 单选 @keyword 多选

列表视图

Flatlist

高性能的简单列表组件，支持下面这些常用的功能：

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
支持跳转到指定行（ScrollToIndex）。
如果需要分组/类/区（section），请使用.

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

Sectionlist

高性能的分组(section)列表组件，支持下面这些常用的功能：

完全跨平台。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持分组的头部组件。
支持分组的分隔线。
支持多种数据源结构
支持下拉刷新。
支持上拉加载。
如果你的列表不需要分组(section)，那么可以使用结构更简单的。

简单的例子：

// Example 1 (Homogeneous Rendering)
<SectionList
  renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
  renderSectionHeader={({ section: { title } }) => (
    <Text style={{ fontWeight: "bold" }}>{title}</Text>
  )}
  sections={[
    { title: "Title1", data: ["item1", "item2"] },
    { title: "Title2", data: ["item3", "item4"] },
    { title: "Title3", data: ["item5", "item6"] }
  ]}
  keyExtractor={(item, index) => item + index}
/>

(wxenv) williamtekiMacBook-Pro:weixin_crawler valentine$ npm install -g anyproxy
npm WARN deprecated clipboard-js@0.3.6: Please migrate to https://github.com/lgarron/clipboard-polyfill
/usr/local/bin/anyproxy -> /usr/local/lib/node_modules/anyproxy/bin/anyproxy
/usr/local/bin/anyproxy-ca -> /usr/local/lib/node_modules/anyproxy/bin/anyproxy-ca
npm WARN svg-inline-react@1.0.3 requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.

+ anyproxy@4.0.12
added 237 packages from 273 contributors in 50.829s
(wxenv) williamtekiMacBook-Pro:weixin_crawler valentine$ anyproxy
[AnyProxy Log][2019-01-21 14:07:17]: Http proxy started on port 8001
[AnyProxy Log][2019-01-21 14:07:17]: web interface started on port 8002
^C[AnyProxy Log][2019-01-21 14:10:01]: clearing cache file...
[AnyProxy Log][2019-01-21 14:10:01]: ==>>> clearing cache
[AnyProxy Log][2019-01-21 14:10:01]: closing webserver...
(wxenv) williamtekiMacBook-Pro:weixin_crawler valentine$ anyproxy-ca
detecting CA status...
AnyProxy CA does not exist.
? Would you like to generate one ? Yes
temp certs cleared
rootCA generated
PLEASE TRUST the rootCA.crt in /Users/valentine/.anyproxy/certificates
The cert is generated at /Users/valentine/.anyproxy/certificates. Please trust the rootCA.crt.
(wxenv) williamtekiMacBook-Pro:weixin_crawler valentine$

配置系统证书认证确认

直接连接数据库

psql -U root -d redash

docker模式的连接数据库

root@firephoenix:~# docker ps
CONTAINER ID        IMAGE                   COMMAND                  CREATED             STATUS              PORTS                    NAMES
4e200be3f2fe        redash_worker           "/app/bin/docker-ent…"   8 weeks ago         Up 8 weeks          5000/tcp                 redash_worker_1
a0b6f27748c1        redash_server           "/app/bin/docker-ent…"   8 weeks ago         Up 8 weeks          0.0.0.0:5000->5000/tcp   redash_server_1
7ab477c2aacd        postgres:9.5.6-alpine   "docker-entrypoint.s…"   8 weeks ago         Up 8 weeks          5432/tcp                 redash_postgres_1
1b03f712e99e        redis:3.0-alpine        "docker-entrypoint.s…"   8 weeks ago         Up 8 weeks          6379/tcp                 redash_redis_1
root@firephoenix:~#
root@firephoenix:~#
root@firephoenix:~#
root@firephoenix:~# docker exec -t -i redash_postgres_1 /bin/bash
bash-4.3#

mac下开发IDE比较多，也比较好用，但是有时候还是会使用vim，有时间配置一下mac下面的vim

查看一下mac上的vim

输入vim可以直接看到vim的相应版本。

如果是7.*版本就需要做一下升级了，如果是8版本基本上也比较新了，足够使用了。

配置vim

1:将vimrc cp一份副本
cp /usr/share/vim/vimrc ~/.vimrc
2:编辑vimrc
vi ~/.vimrc
3:添加需要的设置

set nocompatible                 #去掉有关vi一致性模式，避免以前版本的bug和局限
set nu!                          #显示行号
set guifont=Luxi/ Mono/ 9        #设置字体，字体名称和字号
filetype on                      #检测文件的类型
set history=1000                 #记录历史的行数
set background=dark              #背景使用黑色
syntax on                        #语法高亮度显示
set autoindent                   #vim使用自动对齐，也就是把当前行的对齐格式应用到下一行(自动缩进）
set cindent                      #（cindent是特别针对 C语言语法自动缩进）
set smartindent                  #依据上面的对齐格式，智能的选择对齐方式，对于类似C语言编写上有用
set tabstop=4                    #设置tab键为4个空格，
set shiftwidth =4                #设置当行之间交错时使用4个空格
set ai!                          #设置自动缩进
set showmatch                    #设置匹配模式，类似当输入一个左括号时会匹配相应的右括号
set guioptions-=T                #去除vim的GUI版本中得toolbar
set vb t_vb=                     #当vim进行编辑时，如果命令错误，会发出警报，该设置去掉警报
set ruler                        #在编辑过程中，在右下角显示光标位置的状态行
set nohls                        #默认情况下，寻找匹配是高亮度显示，该设置关闭高亮显示