桥接原生方法

1. 在原生文件中找到 MainApplication，里面的 getPackages，就是用来注册自己写的原生应用

初识动画系统

想要对一个元素添加动画，需要借助 RN 中 Animated，

const Anim1: FC<Props> = () => {
  const marginLeft = useRef(new Animated.Value(100)).current; //创建需要动画的值
  return (
    <View style={styles.container}>
      <Text>Hello</Text>
      <Button
        title="动画执行"
        onPress={() => {
          Animated.timing(marginLeft, {
            //创建动画
            toValue: 300,
            duration: 1000,
            useNativeDriver: false,
          }).start(); //执行动画
        }}
      ></Button>
      <Animated.View style={[styles.view, { marginLeft: marginLeft }]}></Animated.View>
    </View>
  );
};

日志

alert :简单的弹窗提示

<Button
  title="弹窗"
  onPress={() => {
    alert("原生弹窗提示");
  }}
></Button>

接上篇 ReactNative开发环境配置，ES6语法介绍

ReactNative State(状态)

概念

通俗来讲，一个组件，或者一个视图，他们都是 Component，Component 用两个最重要的东西，一个props

一个state

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。(props就像一个类的初始化属性一样，只有在创建时可以赋值，并且组件内部不可修改，也就是readonly)

接上篇 ReactNative介绍

创建 ReactNative 项目

环境配置

yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react-native
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native

ReactNative 是 Facebook 开发的一套用于开发跨平台 App 的技术框架

相比传统开发方式解决了一些痛点：

1.难以复用

2.多平台多次开发

3.效率低下

效率带来的缺点也可想而知就是一些原生可以实现的复杂操作，RN 做不到

前置知识

React Native 看起来很像 React，只不过其基础组件是原生组件而非 web 组件。要理解 React Native 应用的基本结构，首先需要了解一些基本的 React 的概念，比如 JSX 语法、组件、state状态以及props属性。如果你已经了解了 React，那么还需要掌握一些 React Native 特有的知识，比如原生组件的使用。