react native基础-（一）react和react native基础

一，新建项目

 npx react-native init rnDemo
 cd rnDemo
 npx react-native run-android

二，react基础

1，组件：

2，jsx语法

即创建一个dom元素节点。

2-1，jsx语句最外层必须只有一个。可以使用<></>来包裹。

2-2，在jsx中可以插入js表达式。

class Footer extends Component<Iprops> {
  render() {
    const { previousText = '上一步', nextText = '下一步', onPressPrevious, onPressNext } = this.props;
    return (
      <View style={styles.container}>
        {!!onPressPrevious && (
          <TouchableOpacity style={[styles.button, styles.left]} onPress={onPressPrevious}>
            <Text style={styles.contentBox}>{previousText}</Text>
          </TouchableOpacity>
        )}
        {!!onPressNext && (
          <TouchableOpacity style={[styles.button, styles.right]} onPress={onPressNext}>
            <Text style={styles.contentBox}>{nextText}</Text>
          </TouchableOpacity>
        )}
      </View>
    );
  }
}

（）内部是jsx写法，jsx语句内部可以用{}来执行js表达式，而（jsx语句体又属于js表达式），所以这两者之间可以无限地套娃书写。

2-3，创建组件的两种方式：函数式组件和class组件

class才有状态和自己的生命周期。

2-4，state

import React, { Component } from 'react';
class Button extends Component {
  state = {
    color: 'red',
  };
  onclick = () => {
    this.setState({
      color: 'blue',
    });
  };
  render() {
    const { color } = this.state;
    return (
      <button style={{ color }} onClick={this.onclick}>
        按钮
      </button>
    );
  }
}
export default Button;

2-5，props

父组件中这样写：

子组件就可以通过props来取得传过来的参数值，然后直接使用来渲染页面


就和vue中的props的作用其实是一样的。

三，react natice基础

3-1，基础理解

并且所有的字符串都要放置在 组件中才行。

3-2.宽高的定义

实际上，这里style的写法依旧是js的写法，但是接收的是一个对象，所以才会变成style={{}}的写法。所以这里的style其实可以写成这个样子：

但是这样写css没有语法提示，rn提供了一个对象，其中的create方法可以帮助我们创建样式对象：


也就是说，如果有多个Text的话，想要不同颜色，只能挨个设置：


并且后面写的样式会覆盖之前写的样式：

3-3,rn的样式编写

在RN中，采用flexBox进行布局。和我们平时使用flex差不多。

3-4,触摸（点击）事件的实现

3-5，滚动视图

因为如果在视线外的元素，它不会创建出来，在滚动时还会动态地创建和销毁元素。所以性能会更好一些。