React-Native基础使用（样式、组件、注意点）

目录

样式

StyleSheet.create(obj)

获取屏幕宽高

Dimensions.get(str)

注意

组件

Image

ImageBackground

StatusBar

Button

TouchableOpacity

TextInput

ActivityIndicator

Switch

React Native官网

---

样式

手机端样式没有className的写法，但内联样式写法和react的相同，例如style={{color:'red'}}。

React-Native的样式为SS样式：非层叠样式（不会继承父元素的样式，没有层叠效果）。注意text元素例外（Text元素可以继承父元素的样式）。 

RN的容器view默认是flex弹性盒子布局，且默认主轴方向为列（flexDirection:'column'）

StyleSheet.create(obj)

obj为一个对象，每个属性对应一个对象，该对象为css样式，使用方法如下，注意可以传数组的方式（见下方red and greenbg）。

import { Text, StyleSheet, View } from 'react-native'
import React, { Component } from 'react'
export default class testR extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>red</Text>
        <Text style={styles.blue}>blue</Text>
        <Text style={[styles.red,styles.greenbg]}>red and greenbg</Text>
      </View>
    )
  }
}
//内部样式
const styles = StyleSheet.create({
    red:{
        fontSize:30,
        color:'red'
    },
    bule:{
        fontSize:30,
        color:'blue'
    },
    greenbg:{
        backgroundColor:'green'
    }
})

获取屏幕宽高

小程序750rpx代表屏幕宽

Dimensions.get(str)

str为'screen'或'window'，为screen时是获取屏幕宽和高，window时是窗口宽和高。返回一个对象，对象属性对应的屏幕或窗口的宽高。

注意：弹出键盘时，屏幕高=窗口高+输入键盘高

import { Dimensions } from 'react-native'
const { width, height } = Dimensions。get('screen') //获取屏幕宽和高

注意

• paddingVertical相当于padding-top|bottom，paddingHorizeontal相当于padding-left|right。

• RN中，手机端上只有物理像素一个单位dp，所以在设置大小相关不需要单位。

组件

需要引入，import {} from 'react-native'。view理解为div标签，text理解为span标签。rncs用于生成类组件片段。

Image

网络图片通过添加属性source={{uri:'www.baidu.com'}}引入链接，本地图片通过source={require(‘本地图片链接’)}引入。单标签。

注意网络图片必须手动指定宽和高才会有显示，本地图片默认宽高和图片原大小相同。

ImageBackground

背景图组件，通过属性source（引入和Image相同），双标签。

注意必须要给宽高。

StatusBar

状态栏，手机上的显示电量、网络的那一行。translucent属性可以让背景图穿透到下方。单标签。

Button

显示文本通过title属性规定，onPress属性添加点击事件。单标签。

注意color属性在ios上是文本颜色，android上为背景色，不接受style写自定义样式的。

TouchableOpacity

用于实现自定义样式的按钮。当鼠标按下去时，透明度降低。显示文本添加到标签中，属性activeOpacity时点击时显示的透明度。双标签。 

TextInput

 添加secureTextEntry属性，可以使该文本框变成密码框。onChangeText事件用于读取用户的输入。autoFocus属性用于自动获取焦点。单标签。

ActivityIndicator

等待转动的圆环，默认颜色是背景颜色（所以不设置颜色会看不见），size属性可以给大小单词（android可以给数字）。单标签。

Switch

开关，需要手动绑定value和onValueChange属性，不然无法变化。

React Native官网

React Native 中文网 · 使用React来编写原生应用的框架