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 只能写一个,不能写一串
相关推荐
Lei_zhen96几秒前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
辣条小哥哥2 分钟前
electron主进程和渲染进程之间的通信
javascript·electron·ecmascript
咖喱鱼蛋3 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder4 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code21 分钟前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲3 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•5 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS6 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜7 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js