添加toast

Author: accwill

App.tsx

@@ -8,33 +8,32 @@
  * @format
  */
 
-import React, { type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react'
 import {
-    Alert,
-    Button,
+  Button,
   SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
   Text,
   useColorScheme,
   View,
-} from 'react-native';
+} from 'react-native'
 
 import {
   Colors,
   DebugInstructions,
   Header,
   LearnMoreLinks,
   ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+} from 'react-native/Libraries/NewAppScreen'
 
 const Section: React.FC<
   PropsWithChildren<{
-    title: string;
+    title: string
   }>
 > = ({ children, title }) => {
-  const isDarkMode = useColorScheme() === 'dark';
+  const isDarkMode = useColorScheme() === 'dark'
   return (
     <View style={styles.sectionContainer}>
       <Text
@@ -43,7 +42,8 @@ const Section: React.FC<
           {
             color: isDarkMode ? Colors.white : Colors.black,
           },
-        ]}>
+        ]}
+      >
         {title}
       </Text>
       <Text
@@ -52,19 +52,20 @@ const Section: React.FC<
           {
             color: isDarkMode ? Colors.light : Colors.dark,
           },
-        ]}>
+        ]}
+      >
         {children}
       </Text>
     </View>
-  );
-};
+  )
+}
 
 const App = () => {
-  const isDarkMode = useColorScheme() === 'dark';
+  const isDarkMode = useColorScheme() === 'dark'
 
   const backgroundStyle = {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
+  }
 
   return (
     <SafeAreaView style={backgroundStyle}>
@@ -74,13 +75,15 @@ const App = () => {
       />
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
+        style={backgroundStyle}
+      >
         <Header />
         <Button title="点击" testID="id" />
         <View
           style={{
             backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
+          }}
+        >
           <Section title="Step One">
             Edit <Text style={styles.highlight}>App.tsx</Text> to change this
             screen and then come back to see your edits.
@@ -98,8 +101,8 @@ const App = () => {
         </View>
       </ScrollView>
     </SafeAreaView>
-  );
-};
+  )
+}
 
 const styles = StyleSheet.create({
   sectionContainer: {
@@ -118,6 +121,6 @@ const styles = StyleSheet.create({
   highlight: {
     fontWeight: '700',
   },
-});
+})
 
-export default App;
+export default App

__tests__/App-test.tsx

@@ -2,13 +2,13 @@
  * @format
  */
 
-import 'react-native';
-import React from 'react';
-import App from '../App';
+import 'react-native'
+import React from 'react'
+import App from '../App'
 
 // Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
+import renderer from 'react-test-renderer'
 
 it('renders correctly', () => {
-  renderer.create(<App />);
-});
+  renderer.create(<App />)
+})

app/App.tsx

@@ -4,12 +4,12 @@ import * as React from 'react'
 import { NavigationContainer } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { routerConfig } from './router.config'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
 import ErrorBoundary from './components/ErrorBoundary'
 import { LogBox } from 'react-native'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 const Stack = createNativeStackNavigator()
-LogBox.ignoreLogs(['AsyncModal Cancel'])
+LogBox.ignoreLogs(['ModalConfirm Cancel'])
 
 function App() {
   return (

app/components/AsyncModal/components/Modal.tsx

@@ -1,8 +1,9 @@
 /**
+ * 基于原Modal封装了显示盒隐藏
  * @Author: Aceh
  * @Date:   2022-11-25 08:19:33
  * @Last Modified by:   aceh
- * @Last Modified time: 2022-11-25 21:11:09
+ * @Last Modified time: 2022-11-26 12:00:18
  */
 import React from 'react'
 import { Modal as MD, ModalProps } from 'react-native'

app/components/AsyncModal/hooks.ts

@@ -1,6 +1,7 @@
 import React from 'react'
+import { ToastDuration } from '../Toast/constants'
 
-type i_ShowParams = {
+type i_ModalConfirmShowParams = {
   /** 标题 */
   title?: string
 
@@ -14,6 +15,15 @@ type i_ShowParams = {
   cancelText?: string
 }
 
+export type i_ToastShowParams = {
+  /** 要显示的内容 */
+  content?: string
+  /** 持续时间 */
+  duration?: ToastDuration
+}
+
+type i_ShowParams = i_ModalConfirmShowParams & i_ToastShowParams
+
 export type i_ModalIns = {
   /** resolve时表示OK， reject表示cancel */
   show(data?: i_ShowParams): Promise<void>

app/components/AsyncModal/index.tsx

@@ -1,9 +1,10 @@
-import ModalConfirm from './components/Confirm'
-
 /**
  * @Author: Aceh
  * @Date:   2022-11-25 21:21:37
  * @Last Modified by:   aceh
- * @Last Modified time: 2022-11-25 21:22:18
+ * @Last Modified time: 2022-11-26 12:02:16
  */
-export default ModalConfirm
+import ModalConfirm from './components/Confirm'
+import Modal from './components/Modal'
+
+export { ModalConfirm, Modal }

app/components/ErrorBoundary/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Text } from 'react-native'
 
 export default class ErrorBoundary extends React.Component<{
   fallback?: any
@@ -31,7 +32,7 @@ export default class ErrorBoundary extends React.Component<{
   render() {
     if (this.state.hasError) {
       // You can render any custom fallback UI
-      return <div>我是错误信息</div>
+      return <Text>我是错误信息</Text>
     }
 
     return this.props.children

app/components/Toast/constants.ts

@@ -0,0 +1,4 @@
+export enum ToastDuration {
+  LONG,
+  SHORT,
+}

app/components/Toast/index.tsx

@@ -1,14 +1,88 @@
 import React from 'react'
-import { View, Text } from 'react-native'
+import { Text, StyleSheet, Dimensions, Animated } from 'react-native'
+import { Modal } from '../AsyncModal'
+import { i_ModalIns, i_ToastShowParams, useModal } from '../AsyncModal/hooks'
+
+const height = Dimensions.get('window').height
+
+type i_ToastProps = {
+  modal: i_ModalIns
+}
+
+const Toast: React.FC<i_ToastProps> = ({ modal: propsModal }) => {
+  const modal = useModal(propsModal)
+  const opacity = React.useRef<Animated.Value>(new Animated.Value(1)).current
+  const [state, setState] = React.useState<string>('')
+
+  const durationRef = React.useRef<any>()
+
+  const handleShowAnimation = () => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      useNativeDriver: true,
+      duration: 300,
+    }).start(() => {
+      Animated.timing(opacity, {
+        toValue: 0,
+        useNativeDriver: true,
+        duration: 200,
+        delay: durationRef.current,
+      }).start(() => {
+        modal.hide()
+      })
+    })
+  }
+
+  const handleChange = (visible: boolean) => {
+    if (visible) {
+      handleShowAnimation()
+      return
+    }
+    // opacity.setValue(0)
+    // TODO: hide
+  }
+
+  const handleShow = (data: i_ToastShowParams) => {
+    durationRef.current = data.duration
+    setState(data.content as string)
+  }
 
-const Toast: React.FC<any> = () => {
   return (
-    <View>
-      <Text>Toast</Text>
-    </View>
+    <Modal
+      modal={modal}
+      transparent={true}
+      onVisibleChange={handleChange}
+      showMiddle={handleShow}
+    >
+      <Animated.View style={[styles.container, { opacity }]}>
+        <Text style={styles.content}>{state}</Text>
+      </Animated.View>
+    </Modal>
   )
 }
 
 Toast.displayName = 'Toast'
 
 export default Toast
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'rgba(0,0,0,.7)',
+    position: 'absolute',
+    height: 35,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    borderRadius: 50,
+    paddingLeft: 20,
+    paddingRight: 20,
+    shadowColor: 'rgba(0,0,0,1)',
+    shadowOpacity: 0.3,
+    shadowOffset: { width: 5, height: 5 },
+    top: height * 0.4,
+  },
+  content: {
+    color: 'white',
+  },
+})

app/screens/Home/index.tsx

@@ -9,6 +9,7 @@ const Home: React.FC<i_RouterParams> = ({ navigation }) => {
       {routerConfig.map(item => (
         <Button
           key={item.name}
+          testID={item.name}
           onPress={() => navigation.navigate(item.name)}
           title={(item.options as any).title || item.name}
         />

app/screens/Toast/index.tsx

@@ -1,14 +1,32 @@
+import Toast from 'app/components/Toast'
+import Button from 'app/components/Button'
 import React from 'react'
-import { View, Text } from 'react-native'
+import { StyleSheet, View } from 'react-native'
+import { useModal } from 'app/components/AsyncModal/hooks'
+
+const ToastScreen: React.FC<any> = () => {
+  const modal = useModal()
+
+  const handleShow = () => {
+    modal.show({ content: '心怀感恩，负重前行', duration: 2000 })
+  }
 
-const Toast: React.FC<any> = () => {
   return (
-    <View>
-      <Text>Toast</Text>
+    <View style={styles.container}>
+      <Toast modal={modal} />
+      <Button title="显示toast" onPress={handleShow} />
     </View>
   )
 }
 
-Toast.displayName = 'Toast'
+ToastScreen.displayName = 'ToastScreen'
 
-export default Toast
+export default ToastScreen
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'red',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})