弹出层提示组件

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

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

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

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,
  },
});

使用组件

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',
  },
});

效果图