[ 卡卡 DAY 4 ] - React Native 专案结构

我的资料结构

.
├── App.js   // App root component，the start of JS code
├── android/  // Android native project
├── app.json  // React Native app config
├── index.js  // App entry point
├── ios/  // iOS native project
├── assets/  // Icon、Image
├── node_modules/  // npm packages
├── package.json  // npm dependencies
├── src/  // all of JS code
├── prettierrc.js  // setting code format
└── yarn.lock // yarn dependencies

src 里会有以下 folder

- components/：放置单纯的 props 元件
- common/：放会共用的元件
- constants/：放置自行定义的 style 及 mock request
- redux/：放所有的 Action Creators、Reducers
- services/：放重复读取的 Server API
- utils/：放共用的 functions

运作的逻辑

在启用 APP 时， native project（ios 跟 android） 会调用 React Native 去获得 Root Component，而 default 就是指向 index.js 。

index.js：

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

AppRegistry 是所有 React Native 为 JS 入口。在 Root Component 使用 AppRegistry.registerComponent 的方法来注册，然后 native 才能进行加载且在启动完成後通过 AppRegistry.runApplication 来调用进行运作。

App.js

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Color
  LearnMoreLinks,
} from 'react-native/Libraries/NewAppScreen';
import Haha from '@components/Haha';

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <LearnMoreLinks />
        </View>
        <Haha />
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  highlight: {
    fontWeight: '700',
  },
});

export default App;

因为 AppRegistry.registerComponent 指向 App.js，所以 App.js 就成为了 Root Component，之後可以在这个App里面加入你的JS Component，慢慢扩展你的App。

这次专案中我会全都使用 functional component，在 component 里面有个 render() 此方法为渲染，他会回传里面的的标签相似於 HTML，我们称作 JSX (Javascript XML)。

解决Import超多”../“的问题

在 node.js 需要使用 import 来引入另一个档案，而写的是 relative path 如下：

如果在 App.js 引入
import PanelInfo from './src/components/Panel/PanelInfo';

解决办法 - 使用 Alias

介绍插件babel-plugin-module-resolver - 可用 npm or yarn

npm install babel-plugin-module-resolver

於跟目录建立 .babelrc 档案写入 alias，藉由套件 set up aliasing，如下

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "extensions": [".js",".jsx",".ios.js", ".android.js"],
        "alias": {
          "@src": "./src"
        }
      }
    ]
  ]
}

root: 指定路径或根目录
alias: 设定命名及对应的位置
extensions: 解析中使用的扩展数组，也就是覆盖默认的扩展名

接着下以下指令

npm start --reset-cache  // 清除 npm cache

npm run ios // 重新 build

所有档案都可以这样使用：

你也可以把所有folder都命名一遍，例如：
import PanelInfo from '@src/components/Panel/PanelInfo';

会在前面加上'@'是因为避免 npm packages 撞名，例如'@component'

DAY4 done 欢迎指教 ❤️