React Native样式写法、动态样式值；一个组件多组样式。

对于新上手RN的同学，可能样式的写法让你有点懵懂。不过没关系，你只要掌握了下面几种，你就会对样式的写法熟悉起来。

最基本的样式写法：

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

export default function MyScreen(){
    
    
    return(
      <View style={
    
    style.container}>
        <Text>我的</Text>
        <Text style={
    
    {
    
    color:'red'}}>这是红色文字</Text>
      </View>
    );
}

const style = StyleSheet.create({
    
    
  container:{
    
    
    flex: 1,
    alignItems:'center',
    justifyContent:'center'
  }
})

上面这段代码包含了两种样式写法：第一种是View组件的style={style.container} ，这种通过StyleSheet创建一个样式对象，然后View写样式的时候通过一个大括号去调用container样式；第二种是第二个Text组件的内联样式，通过两个大括号，里面写样式。

动态样式值：

由于在RN里写样式时宽度没有百分制，只能写具体的宽度。但是在开发过程中，我们又要做适配，那如何写呢？我们可以通过获取屏幕的宽度来乘以百分数，得到一个值，进而赋给样式宽度。

获取屏幕的信息，包括宽度、高度、分辨率，我们需要通过Dimensions来获取。

import {
    
    Dimensions} from 'react-native';

const Dimensions = Dimensions.get('window')

上面示例，一行是引入Dimensions，一行是过去Dimensions对象。接着我们可以通过Dimensions对象获取宽度。

const width = Dimensions.windth

获取到宽度之后，我们就可以赋值给样式了。

可以直接写在创建的样式表里：

const Vwidth = Dimensions.windth

const style = StyleSheet.create({
    
    
  container:{
    
    
    flex: 1,
    alignItems:'center',
    justifyContent:'center',
    width:Vwidth
  }
})

一个组件多组样式：

const listBlockWidth = 100
//第一种
 <View style={
    
    [getWidthStyle.listBlock,{
    
    width:listBlockWidth}]}>
 </View>


//第二种
 <View style={
    
    [getWidthStyle.listBlock,getWidthStyle.block]}>
 </View>
const getWidthStyle = StyleSheet.creat({
    
    
	listBlock:{
    
    
		height:500,
		flex:1,
	},
	block:{
    
    
		backgroundColor:'white',
      	borderRadius:5,
	}
})

就像上面这样，我们可以通过一个大括号，里面以数组的形式写多组样式。