Native常用组件 Native常用组件

推荐官网 https://reactnative.cn/
Text&View

Hello World! 你好

Button

文章图片
buttonExample.png 警告框（ Alert ）

Alert.alert('这是标题','这是描述文字')Alert.alert( '这是标题', '这是描述', [ {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, {text: 'OK', onPress: () => console.log('OK Pressed')}, ] )//自定义 Alert.alert( '这是标题', '这是描述', [ {text: '这是自定义按钮', onPress: () => console.log('Ask me later pressed')}, {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, {text: 'OK', onPress: () => console.log('OK Pressed')}, ] )

文章图片
exampleandroid.gif 图片

TouchableOpacity 点击半透明

【Native常用组件】flatList列表 columnWrapperStyle 行样式 refreshing 是否刷新中 true | false onRefresh 下拉刷新动作 onEndReached 触底动作 data 指向数据 numColumns 列显示个数 renderItem 渲染数据项目

item.ID} columnWrapperStyle={styles.row} refreshing={this.state.refreshing} onRefresh={()=>{this.getMovie()}} onEndReached={()=>{this.getMovie(2)}} data=https://www.it610.com/article/{this.state.movies} numColumns ={3} renderItem={({item}) => {return( {item.MovieName} )}} />

样式 color 颜色
React Native 支持了 CSS 中大部分的颜色类型
Number 数值
在 React-Native 中，并不支持百分比单位，目前只支持一种单位，即 pt 绝对长度单位，同时，你在定义时不需要加单位
RN 默认 flex布局 flexDirection 默认值为 column 垂直布局

import {StyleSheet} from 'react-native'; const styles = StyleSheet.create({ row:{ display:'flex', flexDirection:'row', justifyContent:'space-around' }, col:{ flex:1, }, })

使用方式

// 行内样式 // 指定样式 // 指定多个样式

react-native-swiper 幻灯片
showButtons 是否显示左右按钮
autoplay 自动播放
activeDotColor 激活颜色

Android iOS Java

input

onChangeText(text)} value=https://www.it610.com/article/{value} maxLength={40} onBlur={} />

扩展 StatusBar
barStyle 状态栏文字的颜色 default | light-content

backgroundColor Android 设备上状态栏的背景颜色

translucent 设置状态栏是否为透明 true | false 。当状态栏的值为 true 的时候，应用将会在状态栏下面进行绘制显示。这样在 Android 平台上面就是沉浸式的效果，可以达到 Android 和 iOS 应用显示效果的一致性。该值常常同配置半透明效果的状态栏颜色一起使用。

React$Node

这种语法 const App: () => React$Node = () => { }就相当于 class App extends React.Component { render() { } }新的写法省略了写rander方法，但VScode会报错，可以改成老的写法也没问题

SafeAreaView
加入了针对iPhoneX设备齐刘海页面适配的组件SafeAreaView，为ReactNative开发APP时对iPhone X的页面适配提供了很大的方便

文章图片
image
Dimensions
Dimensions API 介绍我们使用 Dimensions API 可以得到手机屏幕的宽和高。
onLayout 回调函数还可以用来监测设备放置状态的改变，并得到改变后的新的屏幕高度和宽度。

import React, {Component} from 'react'; import { StyleSheet, View, Dimensions } from 'react-native'; export default class App extends Component { _onLayout(event) { { let { x, y, width, height } = event.nativeEvent.layout; console.log('通过onLayout得到的宽度：' + width); console.log('通过onLayout得到的高度：' + height); }let { width, height } = Dimensions.get('window'); console.log('通过Dimensions得到的宽度：' + width); console.log('通过Dimensions得到的高度：' + height); }render() { return ( ); } }const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center',},}) 输出结果03-22 11:25:25.44413393924 I ReactNativeJS: 通过onLayout得到的宽度：411.4285583496094 03-22 11:25:25.44413393924 I ReactNativeJS: 通过onLayout得到的高度：659.4285888671875 03-22 11:25:25.44413393924 I ReactNativeJS: 通过Dimensions得到的宽度：411.42857142857144 03-22 11:25:25.44413393924 I ReactNativeJS: 通过Dimensions得到的高度：683.4285714285714