ReactNative 初步

1. state和props，函数组件和class组件

• 函数组件没有自己的内部状态，没有生命周期
  • class组件是构造函数的语法糖
  • 每个class都需要用new创建的实例
• class组件有自己的内部状态state，有生命周期
  • 普通函数没有独立的状态
• state
  • setState会重新render，state.xxx修改但是不重新渲染

import Button from './Button'
function App() {
   return(
     <div className="App">
       <Button title="按钮"/>
     </div>
   );
}

// Button组件内部实现
// Button组件中 中 props传递了 title
render() {
  const {title} = this.props
}
<button>{title}</button>

• 模拟View

// View的实现
import React from 'react';
class View extends React.Component {
  render() {
    return (
      <div>{this.props.children}</div>
    )
  }
}

import View from './View';
function App() {
  <View>
    <h1>1111</h1>
    <h2>2222</h2>
  </View>
}

2. RN样式

• 注意最外层的高度，宽度，flex1

• RN中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点，默认值为auto

<View style={{width: 50, height: 50}} />
<View style={{width: '20%', height: 50}} />

• View组件上设置颜色和字体无效，给Text设置才行

• 属性

  • flexDirection:
    • row
    • column
  • justifyContent
    • flex-start / flex-end 从左/右开始排列
    • center 居中
    • space-around 每个元素周围分配相同空间
    • space-between 首尾靠左右，均匀分布
    • space-evenly 每个元素之间间隔相等
  • alignItems 决定子元素在次轴的排列方式
    • flex-strar / flex-end / center
    • stretch 在次轴方向拉伸到与容器相同宽度或高度，默认
    • baseline 基线对齐
  • flex 沿主轴方向填充剩余空间，会覆盖主轴原有长度
  • flexWrap 换行
    • nowrap 不换行
    • wrap 换行，第一行在上方
    • wrap-reverse 换行，第一行在下方

• text内部是一行，text内套多个text

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

class App extends React.Component {
  render() {
    return(
      <View style={styles.container}>
        <View>
          <Text>Hello</Text>
        </View>
        <View>
          <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'red',
    width: '100%',
    height: 300,
    flexDirection: 'column',
    justifyContent: 'center'
  },
});

export default App;

3.触摸事件

• TouchableOpacity
• TouchableNativeFeedback
• TouchableHighlight

4.网络请求

5.安装导航器

• www.imooc.com/article/303…

19.TS相关

• type类型

type Name = string;
let name: Name = 'lisi';

type User = {
  name: string;
}
let user: User = {
  name: 'lisi',
}

• Record类型

type userName = '宋江' | '卢俊义' | '吴用';
type Name = Record<userName, string>;

即：
type Name = {
  宋江: string;
  卢俊义: string;
  吴用: string;
}