声明样式

• 通过style属性直接声明

  • 属性值为对象:<组件 style={ {样式} }/>
  • 属性值为数组:<组件 style={[{样式1},[样式2],...]} />

• 在style属性中调用StyleSheet声明的样式

  • 引入:import {StyleSheet} from 'react-native'
  • 声明:const styles = StyleSheet.create({样式名:{样式}})
  • 使用:<组件 style={styles.样式名}

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

export default class index extends Component {
  render() {
    return (
      <View>
        <Text style = {{color:'blue'}}> 我爱上班 </Text>
        <Text style = {styles.text}> 不想上班 </Text>
      </View>
    )
  }
}
const styles = StyleSheet.create({
    text:{
        fontSize : 50,
        color : 'red'
    }
})

弹性布局Flexbox

• flexDirection:声明主轴方向: row (Web默认)|column(Rn默认)

  • column:从上到下
  • column-reverse:从下到上
  • row:从左到右
  • row-reverse:从右到左

• justifyContent:声明项目在主轴上的对其方式

  • flex-start:项目在主轴开始方向
  • center:项目在主轴中间
  • flex-end:项目在主轴结束方向
  • space-around:项目周围环绕空格
  • space-evenly:项目周围环绕空格,使项目在主轴上被均分,最左最右也有空格
  • space-between:项目周围环绕空格,使项目在主轴上被均分,最左最右无空格

• alignItems:声明项目在交叉轴上的对其方式

  • flex-start:项目在交叉轴开始方向
  • center:项目在交叉轴中间
  • flex-end:项目在交叉轴结束方向
  • strenth:项目在交叉轴拉伸使其充满交叉轴
  • baseline:项目按底部对齐(主轴结束方向)

• flex:声明项目在主轴上的尺寸比例

  • flex:填整数,rn会计算当前主轴上有几个flex,并按比例修改项目尺寸

• flexWarp:项目超过主轴策略

  • nowarp:默认,不做任何处理
  • wrap:换行
  • wrap-revese:换到第一行

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

export default class index extends Component {
  render() {
    return (
      <View style = {styles.flexBox}>
        <Text> 张三 </Text>
        <Text> 李四 </Text>
        <Text> 王五 </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
    flexBox:{
        flexDirection:'column',
        alignItems:'center',
    }
})

响应式布局Dimensions

• Dimensions可以获取当前窗口的数据,从而响应式的更改样式

  • 引入:import {Dimensions} from 'react-native'
  • 获取宽度:const windowWidth = Dimensions.get('window').width`
  • 获取高度:const windowHeight = Dimensions.get('window').height

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

export default class index extends Component {
  render() {
    return (
      <View>
        <View style = {[styles.flexBox,{backgroundColor:'red'}]}>
          <Text> 上半部分 </Text>
        </View>
        <View style = {[styles.flexBox,{backgroundColor:'green'}]}>
          <Text> 下半部分 </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
    flexBox:{
        alignItems:'center',
        justifyContent:'center',
        height: Dimensions.get('window').height/2,
    }
})

核心组件

RN官方提供了不少核心组件,RN在渲染组件时,会把对应的组件渲染为对应系统的组件,比如View在html渲染为div,在安卓渲染为ViewModel,Ios渲染为UiviewModel,具体的组件使用方法可查看https://reactnative.cn/docs/0.74/components-and-apis

这里写一些常用的组件概述和使用方法,可直接看这边,不用去官方文档上慢慢翻阅

• View+Text

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

export default class index extends Component {
  render() {
    // 构造函数
    constructor(){
        super();
                this.text = '我是一个文本';
    }
    return (
      <View>
        <Text> {this.text}</Text>  
      </View>
    )
  }
}

• Button+Alert

import React, { Component } from 'react'
import { View ,Button,Alert} from 'react-native'

export default class index extends Component {
  render() {
    return (
      <View>
        <Button 
            title = '点击我' 
            color="#f194ff" // 按钮的颜色
            onPress = {()=>{
            Alert.alert(
                '提示框标题',
                '提示框内容',
                [{text:'其他选项',onPress:()=>{console.log('其他选项')}},
                {text:'确定',onPress:()=>{console.log('点击了确定')},style:'default'},
                {text:'取消',onPress:()=>{console.log('点击了取消')},style:'cancel'}]
            )
        }}/>
      </View>
    )
  }
}

• Swich+StatusBar

import React, { Component } from 'react'
import {View,Switch,StatusBar} from 'react-native'

export default class index extends Component {
    // 构造函数
    constructor(){
        super();
        this.state = {
            switchStatus:false,
        }
    }
  render() {
    return (
      <View>
        <Switch 
            value = {this.state.switchStatus}  // 开关的状态
            onValueChange = {(value)=>{ // value 是开关的状态
                this.setState({
                    switchStatus:value
                })
            }}
            trackColor={{true:'red',false:'green'}} // 开关的背景颜色   
            thumbColor={this.state.switchStatus?'blue':'yellow'} // 开关的按钮颜色
        />
        <StatusBar 
            hidden = {this.state.switchStatus} // 是否隐藏状态栏
            backgroundColor = 'red' // 状态栏的背景颜色,只支持安卓
            barStyle = 'light-content' // 状态栏的文字颜色
            />    
      </View>
    )
  }
}

• ActivityIndicator+Platform

import React, { Component } from 'react'
import {View,ActivityIndicator,Platform} from 'react-native'

export default class index extends Component {
  if (Platform.OS === 'android'){
    
  } else if (Platform.OS === 'ios'){
    
  }
  render() {
    return (
      <View>
        <ActivityIndicator
          color = "blure" size = "{'large'}"
          /> 
        <ActivityIndicator
          color = "blure" size = "{'70'}"
          /> 
      </View>
    )
  }
}