标签
<div>
-><View>
/<ScrollView>
<p>
-><Text>
<input>
-><TextInput>
<image>
-><Image>
<button>
-><Button>
css background-image
-><ImageBackground>
除此之外还有一些实用组件,如 ActivityIndicator(加载圈圈),Model(类似弹窗,以一个模块为整体做出动画效果),Switch(开关),StatusBar(手机最顶上的那个条,显示系统的时间电量之类的,不是进度条),RefreshControl(下拉刷新)等
值得一提的是 List 相关的几个组件:
- 直接把 item 塞在 ScrollView 里,但是直接放的话会是放几个渲染几个,长列表性能不行
- FlatList,普通的列表,一般直接用这个,性能已经很不错了
- VirtualizedList,虚拟列表,FlatList 就是在 VirtualizedList 的基础上写的。如果需要定制一些功能就用 VirtualizedList
- 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 的概念了,那怎么进行组合呢
- 对于 Text,通过标签进行样式的嵌套
tsx
// I am bold 是粗体,and red 是粗体+红色字体
<Text style={styles.bold}>
I am bold
<Text style={styles.red}> and red</Text>
</Text>
- 多个样式通过数组进行组合
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,
},
});
- 组件间通过将 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
- Text 对应的样式只能放在 Text 里面,不能跟 web 似的放在 View 里面
<Text>
标签必须显式写出来,不能跟 web 似的直接把文字放<View>
里- 不支持 fallback,比如 fontFamily 只能写一个,不能写一串