ReactNative学习笔记4

样式

原文地址,
原文地址2,本文为原文不完全翻译
在ReactNative,是通过使用JavaScript来设置样式的,全部的核心组件都拥有style这个属性,这些样式的名字和值都和CSS一一对应,唯一的不同就是ReactNative使用的是驼峰命名,如backgroundColor而不是background_color.
style属性和JavaScript是一样的,下面的例子就是style的简单使用,可以见到style是可以接收一个数组的,不过这时候数组的最后一个成员拥有最高优先权,所以你可以利用这个特性来集成与改写style
为了代码的整洁性,一般都是使用StyleSheet.create方法在一个地方定义好几个style

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

class alotStyles extends Component {
  render(){
    return (
      <View>
        <Text style={styles.red}>justred</Text>
        <Text style={styles.bigred}>bigred</Text>
        <Text style={styles.bigblue}>bigblue</Text>
        <Text style={styles.red,styles.bigblue,styles.blue}>mixture</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  red:{
    color:'#FF0000'
  },
  blue:{
    color:'#0000FF'
  },
  bigred:{
    color:'#FF0000',
    fontSize:30,
    fontWeight:'bold'
  },
  bigblue:{
    color:'#0000FF',
    fontSize:30,
    fontWeight:'bold'
  },
})

AppRegistry.registerComponent('alotStyles',()=>alotStyles);

Paste_Image.png

宽与高

一个组件的宽与高决定了组件在屏幕上面的尺寸

固定尺寸

控制组件位置最简单的方式就是给它一个固定的宽高,ReactNative的组件尺寸单位是dip(设备无关像素)

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

class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

Paste_Image.png

这种写法只适用于尺寸在各个大小不同的手机屏幕上都一样的情况,所以用得不多.

可变尺寸

适用属性flex可以让组件在一个有效的空间内按比例缩放,一般情况下我们赋值flex=1,这意味着让组件尽可能地填充有效空间,并且根据在同一个父控件中的兄弟控件的flex的值等比例分配空间

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

class FlexDimensionsBasics extends Component{
  render(){
     return(<View style={{height:100, width:100}}>
              <View style={{flex:1, backgroundColor: 'powderblue'}} />
              <View style={{flex:1, backgroundColor: 'skyblue'}} />
              <View style={{flex:1, backgroundColor: 'steelblue'}} />
           </View>)
  }
}
AppRegistry.registerComponent('FlexDimensionsBasics', () => FlexDimensionsBasics);

Paste_Image.png