推荐官网 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 点击半透明

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的页面适配提供了很大的方便

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.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

Native常用组件

样式

扩展

你可能感兴趣的:(Native常用组件)