feat: 初始化路由配置相关

.eslintrc.js

@@ -10,6 +10,36 @@ module.exports = {
         '@typescript-eslint/no-shadow': ['error'],
         'no-shadow': 'off',
         'no-undef': 'off',
+        'comma-dangle': 0,
+        // 确保import语句能正常被当前文件系统解析, 因为es6的import 暂时未被支持, 是以commonjs作为标准
+        'import/no-unresolved': [0],
+        // 是否允许import时省略文件扩展名——允许
+        'import/extensions': [0],
+        'no-use-before-define': 'off',
+        '@typescript-eslint/no-use-before-define': ['error'],
+        'react/jsx-filename-extension': 'off',
+        // 允许在jsx组件上使用扩展props...
+        'react/jsx-props-no-spreading': 'off',
+        'no-console': 'off',
+        quotes: 'off',
+        semi: 'off',
+        'max-len': 'off',
+        'no-underscore-dangle': 'off',
+        'no-unused-vars': 'off',
+        'object-curly-newline': 'off',
+        '@typescript-eslint/no-unused-vars': 'warn',
+        'react/prop-types': 'off',
+        'no-unused-expressions': 'off',
+        'react/require-default-props': 'off',
+        'react/no-array-index-key': 'off',
+        camelcase: 'off',
+        'no-mixed-operators': 'off',
+        'no-restricted-syntax': 'off',
+        'guard-for-in': 'off',
+        'no-await-in-loop': 'off',
+        'array-bracket-spacing': ['error', 'always'],
+        'object-curly-spacing': ['error', 'always'],
+        'react-native/no-inline-styles': 'off',
       },
     },
   ],

.prettierrc.js

 module.exports = {
   arrowParens: 'avoid',
-  bracketSameLine: true,
-  bracketSpacing: false,
+  bracketSameLine: false,
+  bracketSpacing: true,
   singleQuote: true,
   trailingComma: 'all',
+  tabWidth: 2,
+  arrowParens: '<always|avoid>',
 };

.vscode/settings.json

+{}
\ No newline at end of file

__tests__/App-test.tsx

@@ -4,7 +4,7 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import App from '../src/App';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

android/app/src/main/java/com/zhongransbbbmobilesale/MainActivity.java

@@ -4,6 +4,8 @@ import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.ReactRootView;
 
+import android.os.Bundle;
+
 public class MainActivity extends ReactActivity {
 
   /**
@@ -45,4 +47,9 @@ public class MainActivity extends ReactActivity {
       return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
     }
   }
+
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(null);
+  }
 }

index.js

@@ -2,8 +2,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import App from './App';
-import {name as appName} from './app.json';
+import { AppRegistry } from 'react-native';
+import App from './src/App';
+import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

ios/Podfile.lock

@@ -302,6 +302,12 @@ PODS:
   - React-jsinspector (0.70.6)
   - React-logger (0.70.6):
     - glog
+  - react-native-safe-area-context (4.4.1):
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - ReactCommon/turbomodule/core
   - React-perflogger (0.70.6)
   - React-RCTActionSheet (0.70.6):
     - React-Core/RCTActionSheetHeaders (= 0.70.6)
@@ -368,6 +374,9 @@ PODS:
     - React-jsi (= 0.70.6)
     - React-logger (= 0.70.6)
     - React-perflogger (= 0.70.6)
+  - RNScreens (3.18.2):
+    - React-Core
+    - React-RCTImage
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -420,6 +429,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -432,6 +442,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -495,6 +506,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   React-perflogger:
     :path: "../node_modules/react-native/ReactCommon/reactperflogger"
   React-RCTActionSheet:
@@ -519,6 +532,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -557,6 +572,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: b4a65947391c658450151275aa406f2b8263178f
   React-jsinspector: 60769e5a0a6d4b32294a2456077f59d0266f9a8b
   React-logger: 1623c216abaa88974afce404dc8f479406bbc3a0
+  react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
   React-perflogger: 8c79399b0500a30ee8152d0f9f11beae7fc36595
   React-RCTActionSheet: 7316773acabb374642b926c19aef1c115df5c466
   React-RCTAnimation: 5341e288375451297057391227f691d9b2326c3d
@@ -569,6 +585,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: c75ceef7aa60a33b2d5731ebe5800ddde40cefc4
   React-runtimeexecutor: 15437b576139df27635400de0599d9844f1ab817
   ReactCommon: 349be31adeecffc7986a0de875d7fb0dcf4e251c
+  RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 99caf8d5ab45e9d637ee6e0174ec16fbbb01bcfc
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

package.json

@@ -10,8 +10,14 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
+    "@react-navigation/bottom-tabs": "^6.4.0",
+    "@react-navigation/native": "^6.0.13",
+    "@react-navigation/native-stack": "^6.9.1",
+    "@react-navigation/stack": "^6.3.4",
     "react": "18.1.0",
-    "react-native": "0.70.6"
+    "react-native": "0.70.6",
+    "react-native-safe-area-context": "^4.4.1",
+    "react-native-screens": "^3.18.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

App.tsx → src/App.tsx

@@ -8,7 +8,7 @@
  * @format
  */
 
-import React, {type PropsWithChildren} from 'react';
+import React, { type PropsWithChildren } from 'react';
 import {
   SafeAreaView,
   ScrollView,
@@ -26,12 +26,13 @@ import {
   LearnMoreLinks,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+import RootNavigationContainer from './routers/RootNavigationContainer';
 
 const Section: React.FC<
   PropsWithChildren<{
     title: string;
   }>
-> = ({children, title}) => {
+> = ({ children, title }) => {
   const isDarkMode = useColorScheme() === 'dark';
   return (
     <View style={styles.sectionContainer}>
@@ -64,38 +65,7 @@ const App = () => {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
 
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One111">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
+  return <RootNavigationContainer />;
 };
 
 const styles = StyleSheet.create({

src/routers/BottomTabs.tsx

+import * as React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import Home from '../views/Home';
+import Customer from '../views/Customer';
+import PWAS from '../views/PWAS';
+import PersonalCenter from '../views/PersonalCenter';
+import { RootTabParamList } from './types';
+
+const Tab = createBottomTabNavigator<RootTabParamList>();
+
+const BottomTabs = () => {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Home" component={Home} />
+      <Tab.Screen name="Customer" component={Customer} />
+      <Tab.Screen name="PWAS" component={PWAS} />
+      <Tab.Screen name="PersonalCenter" component={PersonalCenter} />
+    </Tab.Navigator>
+  );
+}
+
+export default BottomTabs;

src/routers/RootNavigationContainer.tsx

+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { RootStackParamList } from './types';
+import { ROUTERS as SCREEN } from './routers';
+
+const RootStack = createNativeStackNavigator<RootStackParamList>();
+
+const SCREEN_NAMES = Object.keys(SCREEN) as (keyof typeof SCREEN)[];
+
+const RootNavigationContainer = () => {
+  return (
+    <NavigationContainer>
+      <RootStack.Navigator
+        screenOptions={{
+          headerShown: false,
+        }}
+      >
+        {SCREEN_NAMES.map((name) => (
+          <RootStack.Screen
+            key={name}
+            name={name}
+            getComponent={() => SCREEN[name].component as any}
+            options={{ title: SCREEN[name].title }}
+          />
+        ))}
+      </RootStack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default RootNavigationContainer;

src/routers/routers.ts

+import BottomTabs from './BottomTabs';
+import TestDetailsScreen from '../views/Test/TestDetailsScreen';
+
+export const ROUTERS = {
+  Home: {
+    title: '首页',
+    component: BottomTabs,
+  },
+  TestDetailsScreen: {
+    title: '测试详情',
+    component: TestDetailsScreen,
+  },
+};
\ No newline at end of file

src/routers/types.ts

+import * as React from 'react';
+import { BottomTabScreenProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
+import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native';
+
+const Tab = createBottomTabNavigator<RootTabParamList>();
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+export type TabRouteType = React.ComponentProps<typeof Tab.Screen>;
+
+export type StackRouteType = React.ComponentProps<typeof Stack.Screen>;
+
+export type RootStackParamList = {
+  Home: { post: string },
+  TestDetailsScreen: undefined;
+};
+
+export type RootStackScreenProps<Screen extends keyof RootStackParamList> = 
+  NativeStackScreenProps<RootStackParamList, Screen>;
+
+export type RootTabParamList = {
+  Home: NavigatorScreenParams<RootStackParamList>;
+  Customer: undefined;
+  PWAS: undefined;
+  PersonalCenter: undefined;
+};
+
+export type RootTabScreenProps<Screen extends keyof RootTabParamList> = 
+  CompositeScreenProps<
+    BottomTabScreenProps<RootTabParamList, Screen>,
+    NativeStackScreenProps<RootTabParamList>
+  >;
\ No newline at end of file

src/views/Customer/index.tsx

+import React from 'react';
+import { View, Text } from 'react-native';
+import { RootTabScreenProps } from '../../routers/types';
+
+type CustomerNavigationProp = RootTabScreenProps<'Customer'>;
+
+const Customer: React.FC<CustomerNavigationProp> = ({ navigation }) => {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>客户</Text>
+    </View>
+  );
+};
+
+export default Customer;

src/views/Home/index.tsx

+import React from 'react';
+import { View, Text, Button } from 'react-native';
+import { CompositeScreenProps } from '@react-navigation/native';
+import { RootTabScreenProps, RootStackParamList } from '../../routers/types';
+import { StackScreenProps } from '@react-navigation/stack';
+
+type HomeNavigationProp = 
+  CompositeScreenProps<
+    RootTabScreenProps<'Home'>,
+    StackScreenProps<RootStackParamList>
+  >;
+
+const Home: React.FC<HomeNavigationProp> = ({ navigation, route }) => {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
+        <Button
+          title="Go to Details"
+          onPress={() => navigation.navigate('TestDetailsScreen')}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default Home;

src/views/PWAS/index.tsx

+import React from 'react';
+import { View, Text } from 'react-native';
+
+const Customer = ({ navigation }) => {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>跟单</Text>
+    </View>
+  );
+};
+
+export default Customer;

src/views/PersonalCenter/index.tsx

+import React from 'react';
+import { View, Text } from 'react-native';
+
+const Customer = ({ navigation }) => {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>个人中心</Text>
+    </View>
+  );
+};
+
+export default Customer;

src/views/Test/TestDetailsScreen/index.tsx

+import React from 'react';
+import { View, Text, Button } from 'react-native';
+import { RootStackScreenProps } from '../../../routers/types';
+
+type TestDetailsScreenNavigationProp = RootStackScreenProps<'TestDetailsScreen'>;
+
+const TestDetailsScreen: React.FC<TestDetailsScreenNavigationProp> = ({ navigation }) => {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Details Screen</Text>
+      <Button
+        title="Go back"
+        onPress={() => {
+          // Pass and merge params back to home screen
+          navigation.navigate('Home', {
+            screen: 'Home',
+            params: { post: 'postText' },
+            merge: true,
+          });
+        }}
+      />
+    </View>
+  );
+};
+
+export default TestDetailsScreen;