• RN封装的组件库

    弹出层提示组件

    import {ToastAndroid} from 'react-native';

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

    • 1
    • 2
    • 3

    提示框确认组件

    安装 “@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)})}  //点击开始和取消,默认有个参数布尔型代表点击开始或者点击取消
 />

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101

    获取屏幕宽高组件

    import {Dimensions} from 'react-native';

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

    • 1
    • 2
    • 3

    下拉框组件

    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"
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    带输入框的确认组件(带蒙层,水平垂直居中)

    输入框输入东西然后点击取消或者确认

    import {
  StyleSheet,
  TextInput,
  Pressable,
  View,
  ToastAndroid, 
} from 'react-native';
import {Modal, Text} from '@ui-kitten/components';
import {useState} from 'react';
import {useKeyboard} from '@react-native-community/hooks';

export default function AddClassName({visible, title, optionClick}) {
  const [inputText, setInputText] = useState('');
  const keyboard = useKeyboard();
  function addClick() {
    if (inputText === '') {
      ToastAndroid.show('请输入机构名称', 2000);
      return;
    }
    if (inputText.trim() === '') {
      ToastAndroid.show('输入不能为空', 2000);
      return;
    }
    optionClick(inputText);
    setInputText('');
  }

  return (
    <Modal
      animationType="none"
      visible={visible}
      backdropStyle={{backgroundColor: 'rgba(0, 0, 0, 0.5)'}}>
      <View
        style={[
          styles.container,
          {marginBottom: keyboard.keyboardShown ? 250 : 0},
        ]}>
        <View style={styles.upper}>
          <Pressable
            style={styles.confirm}
            onPress={() => {
              setInputText('');
              optionClick(-1);
            }}>
            <Text style={{fontSize: 14, color: '#999'}}>取消</Text>
          </Pressable>
          <Text style={styles.title}>{title}</Text>
          <Pressable style={styles.confirm} onPress={addClick}>
            <Text style={{fontSize: 14, color: '#007AFF'}}>确定</Text>
          </Pressable>
        </View>
        <View style={styles.bottom}>
          <Text style={styles.actionText}>机构名称：</Text>
          <TextInput
            style={styles.textField}
            value={inputText}
            placeholder="请输入"
            onChangeText={text => {
              setInputText(text);
            }}
          />
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFF',
    width: 350,
    height: 180,
    justifyContent: 'center',
    borderRadius: 5,
  },
  upper: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 50,
  },
  title: {
    fontSize: 14,
    color: '#333',
    fontWeight: '700',
  },
  bottom: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5,
    marginBottom: 20,
  },
  actionText: {
    fontSize: 12,
    color: '#333',
    fontWeight: 'bold',
  },
  textField: {
    width: 150,
    height: 40,
    fontSize: 10,
    textAlign: 'center',
    color: '#333',
    borderRadius: 2,
    borderWidth: 0.5,
    borderColor: '#EEE',
  },
  confirm: {
    padding: 15,
  },
});


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114

    使用组件

    import {
  StyleSheet,
  View,
  Text,
  Image,
  ToastAndroid,
  TouchableOpacity,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import APP from '../config/app.json';
import {useState} from 'react';
import App from '../config/app.json';
const res = [
  require('../assets/images/home/team.png'),
  require('../assets/images/home/team1.png'),
];
import AddClassName from './home/AddClassName2';
export default function TopLogo() {
  const [title, setTitle] = useState('');
  const [flag, setFlag] = useState(false);
  async function xj() {
    console.log('App.images', App.images);
    console.log('AsyncStorage', await AsyncStorage.getItem('name'));
    let a = (await AsyncStorage.getItem('name')) || APP.title;
    setTitle(a);
  }
  xj();
  function updatetitle() {
    setFlag(true);
  }
  function addClassHandle(prop) {
  // 组件返回的prop为-1代表点击了取消,不是-1的话就是我们输入框输入的值
    setFlag(false);
    if (prop == -1) {
      ToastAndroid.show('取消更改机构名称', 2000);
    } else {
      AsyncStorage.setItem('name', prop);
      ToastAndroid.show('机构名称更改成功', 2000);
    }
  }
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={updatetitle}>
        <Text style={styles.school}>{title}</Text>
      </TouchableOpacity>
      <AddClassName
        visible={flag}
        title={'修改机构名称'}
        optionClick={addClassHandle}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  school: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#333333',
  },
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65

    效果图
    在这里插入图片描述

  • 相关阅读:
    python学习、开发实用文档分享
    【附源码】计算机毕业设计JAVA助农脱贫系统
    MATLAB程序设计：牛顿迭代法
    leetcode34.排序数组中查找元素第一个和最后一个位置两种解题方法（超详细）
    AWS SAA-C03 #208
    基于SSM的医院门诊预约挂号系统的设计与
    软件测试实战项目【电商、银行、商城、金融、医药、电商】
    【spring boot 使用模板引擎】
    后端开发—10个小技巧教你保证线程安全
    UVM driver和sequencer握手机制 get_next_item() 和 get() and put()
  • 原文地址：https://blog.csdn.net/weixin_68658847/article/details/133745751