React vs React Native写法上的不同

标签

1. <div> -> <View> / <ScrollView>
2. <p> -> <Text>
3. <input> -> <TextInput>
4. <image> -> <Image>
5. <button> -> <Button>
6. css background-image -> <ImageBackground>

除此之外还有一些实用组件，如 ActivityIndicator（加载圈圈），Model（类似弹窗，以一个模块为整体做出动画效果），Switch（开关），StatusBar（手机最顶上的那个条，显示系统的时间电量之类的，不是进度条），RefreshControl（下拉刷新）等

值得一提的是 List 相关的几个组件：

1. 直接把 item 塞在 ScrollView 里，但是直接放的话会是放几个渲染几个，长列表性能不行
2. FlatList，普通的列表，一般直接用这个，性能已经很不错了
3. VirtualizedList，虚拟列表，FlatList 就是在 VirtualizedList 的基础上写的。如果需要定制一些功能就用 VirtualizedList
4. SectionList，在 FlatList 的基础上加入分节支持

样式

样式名和 css 一样，不过是用的驼峰的写法，比如 background-color -> backgroundColor.

样式不是写在 css 里，是写在 StyleSheet.create()里
用的时候是 styles.xxx 这样子

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

const LotsOfStyles = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.red}>just red</Text>
      <Text style={styles.bigBlue}>just bigBlue</Text>
      <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
      <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default LotsOfStyles;

样式嵌套和组合

json 这么适合表达层级关系的结构，竟然不支持嵌套！所有样式只能有一层

这样通过 json 存的 css，就没有传统 css 的什么 id class 的概念了，那怎么进行组合呢

1. 对于 Text，通过标签进行样式的嵌套

// I am bold 是粗体，and red 是粗体+红色字体
<Text style={styles.bold}>
  I am bold
  <Text style={styles.red}> and red</Text>
</Text>

2. 多个样式通过数组进行组合

// 最终效果是 {width: 20, height: 10, backgroundColor: 'powderblue',}
<View style={[styles.box1, styles.box2, { backgroundColor: 'powderblue' }]} />;

const styles = StyleSheet.create({
  box1: {
    width: 10,
    height: 10,
  },
  box2: {
    width: 20,
  },
});

3. 组件间通过将 style 对象作为 prop 进行级联

动画

既然不用 css，那动画肯定也不是 css 写的，只能写在 js 里

有点类似于 flutter，提供一些封装的 Animated 组件，比如 <Animated.View> 然后把哪些属性需要变化，要咋变化作为一个变量传进去

import React, { useRef, useEffect } from 'react';
import { Animated, Text, View } from 'react-native';
import type { PropsWithChildren } from 'react';
import type { ViewStyle } from 'react-native';

type FadeInViewProps = PropsWithChildren<{ style: ViewStyle }>;

const FadeInView: React.FC<FadeInViewProps> = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 10000,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim]);

  return (
    <Animated.View // Special animatable View
      style={{
        ...props.style,
        opacity: fadeAnim, // Bind opacity to animated value
      }}
    >
      {props.children}
    </Animated.View>
  );
};

一些小的 notice

1. Text 对应的样式只能放在 Text 里面，不能跟 web 似的放在 View 里面
2. <Text> 标签必须显式写出来，不能跟 web 似的直接把文字放 <View> 里
3. 不支持 fallback，比如 fontFamily 只能写一个，不能写一串