RN封装的组件库

弹出层提示组件

import {ToastAndroid} from 'react-native';

ToastAndroid.show('暂未输入服务器地址', 2000);  //参数二代表持续时间

提示框确认组件

安装 “@ui-kitten/components”: “^5.1.2”,

import {StyleSheet, TouchableOpacity, View, Text} from 'react-native';
import {Modal} from '@ui-kitten/components';

function AlertAction(props) {
  return (
    <Modal
      animationType="none" 
      visible={props.visible}
      backdropStyle={{backgroundColor: 'rgba(0, 0, 0, 0.5)'}}>
      <View style={styles.container}>
        <View style={styles.upper}>
          <Text style={styles.title}>提醒</Text>
          <View style={styles.content}>
            <Text style={styles.desc}>{props.mode}</Text>
          </View>
        </View>
        <View style={styles.bottom}>
          <View style={styles.horiLine} />
          <TouchableOpacity
            style={styles.actionBtn}
            onPress={() => props.optionClick(false)}>
            <Text style={{fontSize: 15, color: '#999999'}}>取消</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.actionBtn}
            onPress={() => props.optionClick(true)}>
            <Text style={{fontSize: 15, color: '#007AFF'}}>确定</Text>
          </TouchableOpacity>
          <View style={styles.vertLine} />
        </View>
      </View>
    </Modal>
  );
}

export default AlertAction;

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFF',
    width: 300,
    height: 160,
    borderRadius: 5,
  },
  upper: {
    alignItems: 'center',
    marginTop: 15,
  },
  title: {
    fontSize: 16,
    color: '#333333',
    fontWeight: 'bold',
  },
  content: {
    width: 300,
    height: 70,
    justifyContent: 'center',
    alignItems: 'center',
  },
  desc: {
    fontSize: 15,
    textAlign: 'center',
    color: '#000',
    marginHorizontal: 15,
  },
  bottom: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 25,
    borderRadius: 5,
    position: 'absolute',
    bottom: 0,
  },
  actionBtn: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 150,
    height: 50,
  },
  horiLine: {
    backgroundColor: 'rgba(0,0,80,0.05)',
    height: 1,
    width: 300,
    position: 'absolute',
    bottom: 50,
  },
  vertLine: {
    backgroundColor: 'rgba(0,0,80,0.05)',
    height: 50,
    width: 1,
    position: 'absolute',
  },
});

使用
import AlertAction from './AlertAction.js'
<AlertAction
  visible={true}  //提示框的显示和隐藏
  mode={'同步数据将删除现有的班组、\n训练记录和设备信息且无法恢复，\n确认同步请点击开始。'} //提示框提示的内容
  optionClick={(a)=>{console.log(a)})}  //点击开始和取消,默认有个参数布尔型代表点击开始或者点击取消
 />

获取屏幕宽高组件

import {Dimensions} from 'react-native';

const {width, height} = Dimensions.get('window');

下拉框组件

yarn add @react-native-picker/picker

import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'
import { Picker } from '@react-native-picker/picker'
export default class picker extends Component {
  constructor() {
    super()
    this.state = {
      color: "white"
    }
  }
  render () {
    return (
      <View style={[styles.container, { backgroundColor: this.state.color }]}>
        <Picker
          selectedValue={this.state.color}
          // 如果默认显示或者选中后显示结果为"...",就给style加一下宽高,可能的原因就是没有空间显示出来
          style={{ height: 100, width: 200 }}
          onValueChange={(itemValue, itemIndex) => {
            console.log('itemValue', itemValue)
            this.setState({
              color: itemValue
            })
          }}
        >
          <Picker.Item label="白色" value="white" />
          <Picker.Item label="红色" value="red" />
        </Picker>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: "center"
  }
})