弹出框标题

				<Text
                  style={{
                    marginTop: 20,
                    marginBottom: 5,
                    fontSize: 20,
                    textAlign: 'center',
                    fontWeight: 'bold',
                    color: 'black',
                  }}>
                  {data.language.CROUPLIST_CLASS_MEMBERS}
                </Text>

可以复用的公共体

import React, {useContext, useEffect, useState} from 'react';
import {
  View,
  Text,
  SafeAreaView,
  Dimensions,
  TouchableOpacity,
  StyleSheet,
  Image,
} from 'react-native';
import {Button} from 'react-native-paper';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {
  deviceList,
} from '../../../api/index';
import Store from '../../../stores/index';
import theme from '../../../styles/theme.json';
const {width, height} = Dimensions.get('window');

const BleExample = ({route, navigation}) => {
  const insets = useSafeAreaInsets();
  const [fullScreenHeight, setFullScreenHeight] = useState(height);
  const {data} = useContext(Store);

  useEffect(() => {
    // 计算全屏高度，包括刘海区域
    setFullScreenHeight(height - insets.top);
  }, [insets]);
  return (
    <SafeAreaView
      style={{
        backgroundColor: '#FFFFFF',
        width: width,
        height: height,
      }}>
      <View style={[styles.linearGradient, {height: fullScreenHeight}]}>
        <View style={styles.container}>
          <View style={[styles.titleItem1]}>
            <TouchableOpacity
              onPress={() => {
                navigation.goBack();
              }}>
              <Image
                source={require('../../../static/image/img_arrow-back.png')}
                style={{height: 40, width: 40}}
              />
            </TouchableOpacity>
          </View>
          <View style={[styles.titleItem]}>
            <Text
              style={{
                textAlign: 'left',
                fontSize: 20,
                fontWeight: 'bold',
                color: '#000000',
              }}>
              {data.language.DEVICE_TITLE_MYDEVICE}
            </Text>
          </View>
        </View>
          <View
            style={{
              flex: 1,
              flexDirection: 'column',
              height: height,
              justifyContent: 'space-between',
              paddingBottom: 30,
            }}>
            <View
              style={{
                flexDirection: 'column',
                alignItems: 'center',
                height: '80%',
              }}>
                
            </View>
            <View
              style={[
                {
                  flexDirection: 'row',
                  justifyContent: 'center',
                  alignItems: 'center',
                },
              ]}>
              <Button
                mode="contained"
                textColor={theme.REGIST_BTN_COLOR}
                buttonColor={theme.LOGIN_BTN_COLOR}
                style={styles.Account}
                contentStyle={{height: 50}}
                labelStyle={{fontSize: 20}}
                onPress={() => {
                  navigation.navigate('AddManageMent');
                }}>
                {data.language.DEVICE_BTN_ADD}
              </Button>
            </View>
          </View>
      </View>
    </SafeAreaView>
  );
};

export default BleExample;

const styles = StyleSheet.create({
  linearGradient: {
    paddingTop: 20,
    height: height,
  },
  container: {
    width: width,
    height: height / 15,
    position: 'relative',
  },
  titleItem1: {
    position: 'absolute',
    width: width,
    height: height / 15,
    flexDirection: 'row',
    alignItems: 'center',
    zIndex: 1,
  },
  titleItem: {
    position: 'absolute',
    width: width,
    height: height / 15,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  Account: {
    width: width / 1.1,
    borderRadius: 10,
  },
});

toast

import Toast from '../../../components/Toast';
	
  const [toastflag, setToastFlag] = useState(false); // 添加成功的toast
  const [title, setTitle] = useState(''); // 提示框内容

      setTitle('添加成功');
      setToastFlag(true);
      setTimeout(() => {
        setToastFlag(false);
        setTitle('');
      }, 2000);

<Toast toastflag={toastflag} title={title}></Toast>

公共的顶部

import {Dimensions, Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import Store from '../../../stores/index';
import { useContext } from 'react';
const {width,height} = Dimensions.get('window')
export default function Index({navigation,route}) {
  const {data} = useContext(Store);
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={[styles.titleItem1]}>
          <TouchableOpacity
            onPress={() => {
              navigation.goBack();
            }}>
            <Image
              source={require('../../../static/image/img_arrow-back.png')}
              style={{height: 40, width: 40}}
            />
          </TouchableOpacity>
        </View>
        <View style={[styles.titleItem]}>
          <Text
            style={{
              textAlign: 'left',
              fontSize: 20,
              fontWeight: 'bold',
              color: '#000000',
            }}>
            {data.language.DEVICESSN_TEXT_TITIE}
          </Text>
        </View>
        <View style={styles.titleItem3}>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate('AddManageMent');
            }}>
            <Image
              style={{width: 50, height: 50}}
              source={require('../../../static/image/Device/addDevices.png')}></Image>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    width: width,
    height: height / 15,
    position: 'relative',
    marginTop:20
  },
  titleItem1: {
    position: 'absolute',
    width: width,
    height: height / 15,
    flexDirection: 'row',
    alignItems: 'center',
    zIndex: 1,
    left: 5,
  },
  titleItem: {
    position: 'absolute',
    width: width,
    height: height / 15,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  titleItem3: {
    position: 'absolute',
    // width: width,
    right: 0,
    height: height / 15,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    zIndex: 2,
    right: 10,
  },
})

共用底部弹窗

import BottomModel from '../../../components/BottomModel';

  const [visible, setVisible] = useState(true); // 控制弹窗的显示隐藏

  const onClose = () => {
    setVisible(false);
  };
  // 确认按钮
  const endClass = () => {};

      {visible ? (
        <BottomModel visible={visible} LineBarFlag={true} onClose={onClose}>
          <View>
            <View style={[styles.bottommodulcontainer]}>
              <Text
                style={{
                  textAlign: 'center',
                  fontWeight: 'bold',
                  fontSize: 20,
                }}>
                {data.language.DEVICESUCCESS_MODELTITLE_REMINDER}
              </Text>
              <Text style={{fontSize: 16, marginTop: 20, lineHeight: 30}}>
                {data.language.DEVICESUCCESS_MODELTITLESUB_SUB}
              </Text>
            </View>
            <View style={[styles.BtnBottom]}>
              <Button
                mode="contained"
                textColor={theme.LOGIN_BTN_COLOR}
                buttonColor={theme.REGIST_BTN_COLOR}
                style={[
                  styles.Account2,
                  {borderWidth: 1, borderColor: theme.LOGIN_BTN_COLOR},
                ]}
                contentStyle={{height: 45}}
                labelStyle={{fontSize: 15}}
                onPress={onClose}>
                {data.language.DEVICESUCCESS_MODEL_LEFTBTN}
              </Button>
              <Button
                mode="contained"
                textColor={theme.REGIST_BTN_COLOR}
                buttonColor={theme.LOGIN_BTN_COLOR}
                style={[styles.Account2, {borderWidth: 1}]}
                contentStyle={{height: 45}}
                labelStyle={{fontSize: 15}}
                onPress={endClass}>
                {data.language.DEVICESUCCESS_MODEL_RIGHTBTN}
              </Button>
            </View>
          </View>
        </BottomModel>
      ) : null}


  bottommodulcontainer: {
    padding: 20,
  },
  BtnBottom: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    marginTop: 40,
  },
  Account2: {
    width: width / 2.5,
    borderRadius: 10,
  },