推荐官网 https://reactnative.cn/
Text&View
Hello World!
你好
Button
警告框 ( 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')},
]
)
图片
TouchableOpacity 点击半透明
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={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={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的页面适配提供了很大的方便
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.444 1339 3924 I ReactNativeJS: 通过onLayout得到的宽度:411.4285583496094
03-22 11:25:25.444 1339 3924 I ReactNativeJS: 通过onLayout得到的高度:659.4285888671875
03-22 11:25:25.444 1339 3924 I ReactNativeJS: 通过Dimensions得到的宽度:411.42857142857144
03-22 11:25:25.444 1339 3924 I ReactNativeJS: 通过Dimensions得到的高度:683.4285714285714