React-native 中的样式申明

RN中的样式特点

样式继承性：RN中的样式继承性只发生在 Text 组件上，父组件中的 Text 以外的子组件如果想获得父组件申明的样式只能自己重新申明。个人认为这一点是 RN 比较不方便的地方。
样式命名方式：采用小驼峰命名方式，如：font-size 是 fontSize、 background-color 是 backgroundColor 以此类推。
RN 中所有尺寸都没有单位，如：width: 100, heigth: 100。
特殊样式名：在 RN 中水平外边距叫 marginHorizontal，垂直外边距叫：marginVertical，水平内边距叫 paddingHorizontal，垂直内边距叫：paddingVertical。

RN 样式的申明方式

通过 style 属性值直接声明

1. 属性值为对象：<组件 style={{ 样式 }}/>

2. 属性值为数组：<组件 style={[ { 样式 }, { 样式 },... ]}/>  * 注意：如果数组里样式对象里样式属性有重叠，则后者则样式会覆盖前者样式*

在 style 属性中调用 StyleSheet 声明样式

1. 引入： import { StyleSheet } from 'react-native'

2. 声明：const styles = StyleSheet.create({ ones: { 样式1 }， twos: { 样式2 }，...})

3. 使用：<View style={[styles.ones, styles.twos]}>组件内容</View>

RN 的样式引用方式更像 Vue, 不需要单独新建样式文件引入使用。 一个最简单的 RN 文件结构如下（以函数组件为例）：

    import React feom 'react';
    import { Text, Button，StyleSheet, View } from 'react-native';
    
    export default App = () => {
        // 变量定义、变量状态改变，事件的使用、绑定和 react 中一样
        const [text, setText] = useState<string>('初始文案');
        const textChange = () => {
            setText('新的文案');
        };
        
        return (
            <View style={styles.container}>
                <Text>文案</<Text>
                <Button  
                    onPress={textChange}  
                    title="事件按钮"  
                />
            </View>
        )
    }
    
    const styles = StyleSheet.create({
        container: {
            heigth: 100,
            width: 100,
            ...
        },
        ...
    })

推荐使用 styleSheet 方式声明样式，代码简洁优雅、样式可复用可维护性更强

// 组件中
<View style={styles.container}>
    <Text style={styles.row}>
         styleSheet 声明样式例子
    </Text>
    <View style={styles.separator} />
</View>

// styleSheet中
const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    marginTop: 40,
    margin: 15,
  },
  separator: {
    height: 1,
    backgroundColor: '#bbbbbb',
  },
});

Flexbox 布局

Flexbox 术语

容器（container）: 采用 flex 布局的元素，成为 flex 容器（flex container），简称“容器”
项目（item）: 容器中的所有子元素成为项目（item）
主轴（main axis，与 web 端方向不同）
交叉轴（corss axis，与 web 端方向不同）

Web 端弹性布局模型与 RN 布局模型

Web 端弹性布局模型

RN 弹性布局模型

Flexbox 属性

flexDirection
- 声明主轴方向： row (Web默认) ｜ column（RN默认）
justifyContent
- 声明 item 在主轴方向的对齐方式
alignItems
- 声明 item 在交叉轴上的对齐方式
flex
- 声明 item 在主轴上的尺寸比例

一些布局展示

RN 中响应式布局

Dimensions

Dimensions.get() 方法能获取到当前窗口的尺寸信息，使用 Dimensions.get() 获取到的尺寸信息用于计算元素的样式类似于 Web 端的 vw / vh。

引入：import { Dimensions } from 'react-native
获取当前窗口宽高
- const windowWidth = Dimensions.get('window').width;
- const windowHeight = Dimensions.get('window').height;
应用示例如图：

好啦，本次分享结束！

ps：以上内容如果有不正确地方或讲解逻辑、思路、排版等有不易于理解的地方，欢迎大家在评论区留言指出，我们一起找到最优解。最后希望能在社区和大家共同进步，下期继续分享 RN 有关内容。

React-native 基础语法