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 这样子

tsx 复制代码
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,通过标签进行样式的嵌套
tsx 复制代码
// I am bold 是粗体,and red 是粗体+红色字体
<Text style={styles.bold}>
  I am bold
  <Text style={styles.red}> and red</Text>
</Text>
  1. 多个样式通过数组进行组合
tsx 复制代码
// 最终效果是 {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,
  },
});
  1. 组件间通过将 style 对象作为 prop 进行级联

动画

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

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

tsx 复制代码
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 只能写一个,不能写一串
相关推荐
bysking24 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓40 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v44 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry2 小时前
JS常用数组方法 reduce filter find forEach
javascript
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢3 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落3 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt