overview
以下の導入方法を示す。
この記事は結構丁寧なメモです。
- react-native
- expo
- typescript
- NativeBase
- why-did-you-render
- eslint
expo install
$ npm install -g expo-cli
プロジェクト用意
$ expo init react-native-sample
✔ Choose a template: › tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
✔ Downloaded and extracted project files.
🧶 Using Yarn to install packages. You can pass --npm to use npm instead.
✔ Installed JavaScript dependencies.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following yarn commands.
- cd react-native-sample
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios
- yarn web
$ yarn start
yarn run v1.22.10
$ expo start
Starting project at /Users/matsumoto/Documents/MyWork/react-native-sample
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler
exp://192.168.XX.XX:19000
~QR割愛~
To run the app with live reloading, choose one of:
› Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
› Press a for Android emulator, or i for iOS simulator, or w to run on web.
› Press e to send a link to your phone with email.
expoをインストールしてQRを読み込む
QRを読み込むと以下のような画面が出力される。
NativeBaseを導入する
UIライブラリNativeBaseを導入する
install
$ yarn add native-base
# NativeBase は Font.loadAsync を使ってロードできるカスタムフォントをいくつか使用しているため、インストールが必要
$ expo install expo-font
ファイルの修正
useCachedResources.tsファイルにてフォントの読み込みを行う。
useCachedResources.ts
import { Ionicons } from '@expo/vector-icons';
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import * as React from 'react';
export default function useCachedResources() {
const [isLoadingComplete, setLoadingComplete] = React.useState(false);
// Load any resources or data that we need prior to rendering the app
React.useEffect(() => {
async function loadResourcesAndDataAsync() {
try {
SplashScreen.preventAutoHideAsync();
// Load fonts
await Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
...Ionicons.font,
"space-mono": require("../assets/fonts/SpaceMono-Regular.ttf"),
});
} catch (e) {
// We might want to provide this error information to an error reporting service
console.warn(e);
} finally {
setLoadingComplete(true);
SplashScreen.hideAsync();
}
}
loadResourcesAndDataAsync();
}, []);
return isLoadingComplete;
}
EditScreenInfo.tsを修正してNativeBaseのボタンを表示してみる
EditScreenInfo.ts
import React from 'react';
import { Container, Text, Button } from "native-base";
export default function EditScreenInfo({ path }: { path: string }) {
return (
<Container>
<Button>
<Text>start working on your app!</Text>
</Button>
</Container>
);
}
画面確認
導入できた。
why-did-you-render導入
install
$ yarn add @welldone-software/why-did-you-render
setting
wdyr.tsをプロジェクトルートに作成
wdyr.ts
import React from "react";
import whyDidYouRender from "@welldone-software/why-did-you-render";
if (process.env.NODE_ENV === "development") {
whyDidYouRender(React, {
trackAllPureComponents: true,
});
}
App.tsxを修正
App.tsx
import './wdyr'
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
if (!isLoadingComplete) {
return null;
} else {
return (
<SafeAreaProvider>
<Navigation colorScheme={colorScheme} />
<StatusBar />
</SafeAreaProvider>
);
}
}
レンダリングされた理由のログを確認
導入はできた。
eslint導入
install
$ yarn add eslint
$ yarn add eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react-hooks
setting
初期設定を行う
$ ./node_modules/.bin/eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JSON
~割愛~
✔ Would you like to install them now with npm? · No / Yes
~割愛~
eslintの設定を行う
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"airbnb",
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking"
],
"settings": {
"import/resolver": {
"node": {
"extensions": [
".js",
".jsx",
".ts",
".tsx",
".json",
".native.js"
]
}
}
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"ignorePatterns": ["node_modules/"],
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": [
"off"
],
"react/jsx-filename-extension": [
2,
{
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
],
"react/jsx-props-no-spreading":"off",
"@typescript-eslint/explicit-module-boundary-types":"off",
"react/destructuring-assignment":"off",
"react/display-name":"off",
"react/prop-types":"off",
"react/no-unescaped-entities":"off"
}
}
参考
https://github.com/software-mansion/react-native-screens/issues/62
https://stackoverflow.com/questions/55614983/jsx-not-allowed-in-files-with-extension-tsxeslintreact-jsx-filename-extensio
eslint --fixを実行する
package.jsonのscriptsに以下を追加
package.json
"scripts": {
...
"lint": "eslint --ext .ts,.tsx ./"
},
実行する
$ yarn lint --fix
エラーがいっぱい出るので修正する。
ここまでの内容をGithubで。
- react-native-sample
- スターが欲しい
所感
アプリで作りたいものができたらこれを利用する。
意外とすんなりできた感ある。