目录
样式
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.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
