fix: solved web side issues

dohooo · Jun 17, 2022 · 34f1108 · 34f1108
1 parent 1de879f
commit 34f1108
Show file tree

Hide file tree

Showing 19 changed files with 85 additions and 275 deletions.
diff --git a/assets/fold.gif b/assets/fold.gif
diff --git a/exampleExpo/package.json b/exampleExpo/package.json
@@ -36,7 +36,6 @@
         "react-native-safe-area-context": "4.2.4",
         "react-native-screens": "~3.11.1",
         "react-native-snap-carousel": "^3.9.1",
-        "react-native-ui-lib": "^6.17.1",
         "react-native-web": "0.17.7"
     },
     "devDependencies": {

diff --git a/exampleExpo/src/App.tsx b/exampleExpo/src/App.tsx
@@ -3,8 +3,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 // @ts-ignore
 import { Restart } from 'fiction-expo-restart';
-import { I18nManager } from 'react-native';
-import { Text, View } from 'react-native-ui-lib';
+import { I18nManager, Text, View } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 
 import Home from './home';
@@ -81,7 +80,7 @@ function App() {
 
     const app = (
         <React.Suspense fallback={null}>
-            <View flex>
+            <View style={{ flex: 1 }}>
                 <NavigationContainer>
                     <Stack.Navigator
                         initialRouteName="Home"
@@ -91,11 +90,19 @@ function App() {
                                 backgroundColor: 'white',
                             },
                             headerRight: ({ tintColor }) => (
-                                <View row centerV>
+                                <View
+                                    style={{
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                    }}
+                                >
                                     {isWeb && (
                                         <>
                                             <QRCode tintColor={tintColor} />
-                                            <Text color={tintColor}> | </Text>
+                                            <Text style={{ color: tintColor }}>
+                                                {' '}
+                                                |{' '}
+                                            </Text>
                                         </>
                                     )}
                                     <TouchableWithoutFeedback
@@ -105,7 +112,7 @@ function App() {
                                             Restart();
                                         }}
                                     >
-                                        <Text color={tintColor}>
+                                        <Text style={{ color: tintColor }}>
                                             {isRTL ? 'LTR' : 'RTL'}
                                         </Text>
                                     </TouchableWithoutFeedback>

diff --git a/exampleExpo/src/anim-tab-bar/index.tsx b/exampleExpo/src/anim-tab-bar/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Pressable } from 'react-native';
+import { View, Pressable } from 'react-native';
 import Animated, {
     Extrapolate,
     interpolate,
@@ -9,7 +9,6 @@ import Animated, {
     withTiming,
 } from 'react-native-reanimated';
 import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel';
-import { Colors, View } from 'react-native-ui-lib';
 import SButton from '../components/SButton';
 import { ElementsText, window } from '../constants';
 import { useToggleButton } from '../hooks/useToggleButton';
@@ -39,7 +38,7 @@ function Index() {
                         justifyContent: 'center',
                         alignItems: 'center',
                         borderBottomWidth: 1,
-                        borderBottomColor: Colors.blue30,
+                        borderBottomColor: '#0071fa',
                     }}
                     width={PAGE_WIDTH}
                     height={PAGE_HEIGHT}
@@ -114,7 +113,7 @@ const Item: React.FC<Props> = (props) => {
         const color = interpolateColor(
             animationValue.value,
             [-1, 0, 1],
-            [Colors.grey30, Colors.blue30, Colors.grey30]
+            ['#b6bbc0', '#0071fa', '#b6bbc0']
         );
 
         return {

diff --git a/exampleExpo/src/circular/index.tsx b/exampleExpo/src/circular/index.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { View } from 'react-native-ui-lib';
 import Carousel from 'react-native-reanimated-carousel';
 import SButton from '../components/SButton';
 import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
 import { ElementsText, window } from '../constants';
 import { interpolate } from 'react-native-reanimated';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { SBImageItem } from '../components/SBImageItem';
 import { faker } from '@faker-js/faker';
 

diff --git a/exampleExpo/src/components/QRCode.tsx b/exampleExpo/src/components/QRCode.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Image, StyleSheet } from 'react-native';
+import { Text, View, Image, StyleSheet } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
-import { Text, View } from 'react-native-ui-lib';
 
 export const QRCode: React.FC<{ tintColor?: string }> = ({ tintColor }) => {
     const [visible, setVisible] = React.useState(false);
@@ -12,7 +11,7 @@ export const QRCode: React.FC<{ tintColor?: string }> = ({ tintColor }) => {
             }}
         >
             <View>
-                <Text color={tintColor}>{'QR CODE'}</Text>
+                <Text style={{ color: tintColor }}>{'QR CODE'}</Text>
                 {visible && (
                     <View style={styles.qrCodeContainer}>
                         <Image

diff --git a/exampleExpo/src/components/SBImageItem.tsx b/exampleExpo/src/components/SBImageItem.tsx
@@ -5,9 +5,9 @@ import {
     ActivityIndicator,
     StyleProp,
     ViewStyle,
+    Image,
     ImageURISource,
 } from 'react-native';
-import { Image } from 'react-native-ui-lib';
 
 interface Props {
     style?: StyleProp<ViewStyle>;

diff --git a/exampleExpo/src/components/SBTextItem.tsx b/exampleExpo/src/components/SBTextItem.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import { Text } from 'react-native-ui-lib';
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 interface Props {
     style?: StyleProp<ViewStyle>;
@@ -10,9 +9,7 @@ interface Props {
 export const SBTextItem: React.FC<Props> = ({ style, index }) => {
     return (
         <View style={[styles.container, style]}>
-            <Text style={{ fontSize: 30 }} color="black">
-                {index}
-            </Text>
+            <Text style={{ fontSize: 30, color: 'black' }}>{index}</Text>
         </View>
     );
 };

diff --git a/exampleExpo/src/components/SButton.tsx b/exampleExpo/src/components/SButton.tsx
@@ -1,22 +1,39 @@
 import React from 'react';
-import { View, Button, ButtonProps, Text } from 'react-native-ui-lib';
-
+import { View, Text } from 'react-native';
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 export interface ISButtonProps {
     visible?: boolean;
+    onPress?: () => void;
 }
 
-const SButton: React.FC<ISButtonProps & ButtonProps> = (props) => {
-    const { children, visible = true } = props;
+const SButton: React.FC<ISButtonProps> = (props) => {
+    const { children, visible = true, onPress } = props;
 
     if (!visible) {
         return <></>;
     }
 
     return (
-        <View row centerH>
-            <Button {...props} marginT-20 backgroundColor="#26292E">
-                <Text color="white">{children}</Text>
-            </Button>
+        <View
+            style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            <TouchableWithoutFeedback onPress={onPress}>
+                <View
+                    style={{
+                        marginTop: 20,
+                        backgroundColor: '#26292E',
+                        borderRadius: 50,
+                        paddingHorizontal: 20,
+                        padding: 10,
+                    }}
+                >
+                    <Text style={{ color: 'white' }}>{children}</Text>
+                </View>
+            </TouchableWithoutFeedback>
         </View>
     );
 };

diff --git a/exampleExpo/src/flow/index.tsx b/exampleExpo/src/flow/index.tsx
@@ -4,7 +4,7 @@ import Carousel from 'react-native-reanimated-carousel';
 import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
 import { window } from '../constants';
 import { useHeaderHeight } from '@react-navigation/elements';
-import { Text, View } from 'react-native-ui-lib';
+import { Text, View } from 'react-native';
 import { BlurView } from 'expo-blur';
 import { faker } from '@faker-js/faker';
 import { Image } from 'react-native';
@@ -81,17 +81,22 @@ function Index() {
                 data={[...new Array(10).keys()]}
                 renderItem={({ index }) => {
                     return (
-                        <View key={index} flex padding-10>
+                        <View key={index} style={{ flex: 1, padding: 10 }}>
                             <View
-                                flex
-                                br20
-                                row
-                                spread
                                 style={{
                                     alignItems: 'flex-start',
+                                    flex: 1,
+                                    justifyContent: 'space-between',
+                                    flexDirection: 'row',
+                                    borderRadius: 20,
                                 }}
                             >
-                                <View row centerV>
+                                <View
+                                    style={{
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                    }}
+                                >
                                     <Image
                                         style={{
                                             width: 20,
@@ -110,8 +115,8 @@ function Index() {
                                         numberOfLines={1}
                                         style={{
                                             maxWidth: ITEM_WIDTH * 0.3 - 40,
+                                            color: 'white',
                                         }}
-                                        white
                                     >
                                         {faker.animal.dog()}
                                     </Text>

diff --git a/exampleExpo/src/fold/index.tsx b/exampleExpo/src/fold/index.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { View } from 'react-native-ui-lib';
 import Carousel from 'react-native-reanimated-carousel';
 import SButton from '../components/SButton';
 import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
@@ -11,7 +10,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { SBImageItem } from '../components/SBImageItem';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import faker from '@faker-js/faker';
 
 const PAGE_WIDTH = window.width;

diff --git a/exampleExpo/src/home/index.tsx b/exampleExpo/src/home/index.tsx
@@ -8,7 +8,6 @@ import {
 } from 'react-native';
 import { useNavigation, NavigationProp } from '@react-navigation/native';
 import type { RootStackParamList } from '../App';
-import { Colors } from 'react-native-ui-lib';
 import { isAndroid, isIos } from '../utils';
 
 const LayoutsPage: Array<Record<'name', keyof RootStackParamList>> = [
@@ -144,7 +143,7 @@ export default Index;
 const styles = StyleSheet.create({
     listItem: {
         alignItems: 'flex-start',
-        borderColor: Colors.grey60,
+        borderColor: '#e8ecf0',
         borderBottomWidth: 0.5,
         padding: 16,
         backgroundColor: '#fff',
@@ -156,7 +155,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         paddingHorizontal: 16,
         paddingVertical: 8,
-        backgroundColor: Colors.grey60,
+        backgroundColor: '#e8ecf0',
     },
     sectionText: {
         fontSize: 14,

diff --git a/exampleExpo/src/marquee/index.tsx b/exampleExpo/src/marquee/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Text } from 'react-native-ui-lib';
+import { View, Text } from 'react-native';
 import Carousel from 'react-native-reanimated-carousel';
 import { window } from '../constants';
 import Animated, { Easing } from 'react-native-reanimated';
@@ -57,7 +57,13 @@ function Index() {
         <ReactionContainer text="一二三四五六七八九十">
             {(text, layout) => {
                 return (
-                    <View centerH flex marginT-72>
+                    <View
+                        style={{
+                            alignItems: 'center',
+                            flex: 1,
+                            marginTop: 72,
+                        }}
+                    >
                         <Carousel
                             width={layout?.width ?? PAGE_WIDTH}
                             height={30}

diff --git a/exampleExpo/src/multiple/index.tsx b/exampleExpo/src/multiple/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from 'react-native-ui-lib';
+import { View } from 'react-native';
 import Carousel from 'react-native-reanimated-carousel';
 import { SBItem } from '../components/SBItem';
 import SButton from '../components/SButton';

diff --git a/exampleExpo/src/normal/index.tsx b/exampleExpo/src/normal/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from 'react-native-ui-lib';
+import { View } from 'react-native';
 import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel';
 import { SBItem } from '../components/SBItem';
 import SButton from '../components/SButton';

diff --git a/exampleExpo/src/parallax-layers/index.tsx b/exampleExpo/src/parallax-layers/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from 'react-native-ui-lib';
+import { View } from 'react-native';
 import Carousel from 'react-native-reanimated-carousel';
 import SButton from '../components/SButton';
 import { ElementsText, window } from '../constants';

diff --git a/exampleExpo/src/stack/index.tsx b/exampleExpo/src/stack/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from 'react-native-ui-lib';
+import { View } from 'react-native';
 import Carousel from 'react-native-reanimated-carousel';
 import { SBItem } from '../components/SBItem';
 import SButton from '../components/SButton';

diff --git a/exampleExpo/webpack.config.js b/exampleExpo/webpack.config.js
@@ -7,7 +7,7 @@ const node_modules = path.join(__dirname, 'node_modules');
 
 module.exports = async function (env, argv) {
     const config = await createExpoWebpackConfigAsync(env, argv);
-    config.output.publicPath = '/react-native-reanimated-carousel';
+    // config.output.publicPath = '/react-native-reanimated-carousel';
     config.module.rules.push({
         test: /\.(js|jsx|ts|tsx)$/,
         include: path.resolve(root, 'src'),