ReactNative 基础 - 01 （介绍、样式使用）

黑猫了个怪怪

于 2021-12-15 20:31:24 发布

阅读量1.6k

点赞数 1

文章标签： react native android react.js

本文链接：https://blog.csdn.net/Janicecat/article/details/121961156

版权

本文介绍如何在React Native项目中正确引入外部组件，并强调了使用RN内置组件和 StyleSheet进行样式的编写规范。实例演示了如何使用style属性、StyleSheet.create()创建动态样式。

摘要由CSDN通过智能技术生成

1、项目包基础结构：

2、组件必须是RN提供的，否则手机端APP取法编译通过，使用组件需要先引入（按需引入）

文本必须写在<Text></Text>中

3、样式使用：

在RN中样式写法：

3.1、在组件标签的style属性进行书写，对象格式

3.2、RN没有css文件，使用官方提供的API：StyleSheet 实现样式的抽象写法，写在JSX范围之外，样式不层叠

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

export default class App extends Component {
  render() {
    return (
      <View>
        <Text style={{ color: 'purple' }}> OOOOO </Text>
        <Text style={ ss.danger }> danger </Text>
        <Text style={[ss.danger, {marginTop: 10}]}> danger </Text>
      </View>
    );
  }
}

const ss = StyleSheet.create({
  danger: {
    backgroundColor: 'red',
  },
});