react native常用css

最新推荐文章于 2024-09-10 08:57:34 发布

热爱前端的小君同学

最新推荐文章于 2024-09-10 08:57:34 发布

阅读量1.2k

点赞数 1

分类专栏： react-native

本文链接：https://blog.csdn.net/qq_37815596/article/details/87969441

版权

react-native 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

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>

背景图片

<ImageBackground source={require("../img/weather.jpg")} style={{ width: '100%', height: '100%' }}>
    <SafeAreaView style={{ flex: 1 }}>
         <WeatherInfo />
    </SafeAreaView>
</ImageBackground>