目录
样式
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:'·'}}引入链接,本地图片通过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来编写原生应用的框架
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |