React Native + Redux实现一个公共消息组件

一、安装依赖

npm i @reduxjs/toolkit  react-redux 

二、创建store与slice

import {createSlice} from '@reduxjs/toolkit'const messageSlice = createSlice({name: 'message',initialState: {isShow: false,message: '',type: ''},reducers: {showMessage: (state,action) => {const { type, message } = action.payload;state.isShow = truestate.message = messagestate.type = type},hideMessage: (state) => {state.isShow = false}}
})export const { showMessage,hideMessage } = messageSlice.actions
export default messageSlice.reducer

import {configureStore} from '@reduxjs/toolkit'
import messageSlice from "@/store/slices/messageSlice";const store = configureStore({reducer: {message: messageSlice}
})export default store

三、自定义消息组件SimpleToast

import React, {useEffect, useRef} from 'react';
import {View,Text,StyleSheet
} from 'react-native';
import {useDispatch, useSelector} from 'react-redux'
import {hideMessage} from '@/store/slices/messageSlice'const SimpleToast = () => {const duration = 1500;const {isShow, message, type} = useSelector((state) => state.message);const timerRef = useRef(null);const dispatch = useDispatch();const getBackgroundColor = () => {const colors = {info: '#1890ff',success: '#52c41a',warning: '#fa8c16',error: '#ff4d4f'};return colors[type] || colors.info;};useEffect(() => {if (isShow) {// 清空之前的定时器if (timerRef.current) {clearTimeout(timerRef.current);}// 自动关闭timerRef.current = setTimeout(() => {dispatch(hideMessage());}, duration);}// 组件卸载时清理return () => {if (timerRef.current) {clearTimeout(timerRef.current);}};}, [isShow]);if (!isShow) {return null;}return (<Viewstyle={[styles.container,{backgroundColor: getBackgroundColor(),}]}pointerEvents="none" // 防止 toast 遮挡下方元素><Text style={styles.message} numberOfLines={2}>{message}</Text></View>);
};const styles = StyleSheet.create({container: {position: 'absolute',alignSelf: 'center', // 水平居中top: 100, // 距离顶部100pxzIndex: 9999,paddingHorizontal: 16,paddingVertical: 12,borderRadius: 8,maxWidth: '80%', // 最大宽度为屏幕宽度的80%},message: {color: 'white', // 文字为白色fontSize: 14,fontWeight: '500',textAlign: 'center',lineHeight: 20,// 不设置固定宽度，让文字自适应}
});export default SimpleToast;

四、放入app目录下的配置_layout.js中

import {Slot} from 'expo-router';
import '@/global.css'
import {Provider} from 'react-redux';
import store from "@/store";
import AuthInitializer from "@/components/AuthInitializer";
import SimpleToast from "@/components/SimpleToast";export default function Layout() {return <Provider store={store}><AuthInitializer><SimpleToast/><Slot/></AuthInitializer></Provider>
}