react native常用css

快来打我* 2022-03-16 09:16 182阅读 0赞

*  布局属性：[https://reactnative.cn/docs/layout-props/][https_reactnative.cn_docs_layout-props]
 *  样式：[https://reactnative.cn/docs/layout-props/][https_reactnative.cn_docs_layout-props]
 *  图标列表

[https://oblador.github.io/react-native-vector-icons/][https_oblador.github.io_react-native-vector-icons]

npm install react-native-vector-icons --save

*  控制物体并排还是分行显示:flex-direction
 *  垂直居中：alignItems: 'center'
 *  在行内的对齐方式，类似justifyContent，只是
 *  文本方向：textAlign:'left'
 *  水平：justifyContent
 *  border:
    
    borderBottomWidth:1,
    
    borderBottomColor:"\#eee"
 *  react-native的css也是写在js文件内，如下示例：

import React from 'react';
    import {
        StyleSheet
    } from 'react-native';
    
    export default StyleSheet.create(
        {
            totalbox:{
                display:"flex"
            }
        }
    );

样式传递：（例如，上面文件名为Tab3Style.js，按照下面代码进行样式传递）

import React, { Component } from 'react';
    import { View, Text} from 'react-native';
    import Tab3Style from './Tab3Style'
    class Tabnavigation3 extends Component {
      static navigationOptions = {
        headerTitle: "我"
      };
      render() {
        return (
          <View style={Tab3Style.totalbox}>
             <Text style={Tab3Style.title}>Inbox</Text>
          </View>
        );
      }
    }
    export default Tabnavigation3

*  iphonex中内容不会被刘海遮住

<SafeAreaView>
      <View>
        <Text>Hello World!</Text>
      </View>
    </SafeAreaView>

*  背景图片

[https_reactnative.cn_docs_layout-props]: https://reactnative.cn/docs/layout-props/
[https_oblador.github.io_react-native-vector-icons]: https://oblador.github.io/react-native-vector-icons/