react-native+typescript+redux

はじめに

react-native+redux
react-native+typescript
だったりギリギリのところでなにかかけている記事がとても多くて，
3つを使ってプロダクト作成するいろいろの情報がちらかっていて謎だったので自分用にまとめる．

インストール，依存解決

npm -g install yarn
yarn global add react-native-cli
react-native init <ProjectName>
cd <ProjectName>
# typescript関係を追加
yarn add typescript @types/react @types/react-native @types/jest --dev
# redux関係を追加
yarn add redux react-redux @types/react-redux --dev
# typescriptでいい感じに起動してくれるやつを追加
yarn add react-native-typescript-transformer --dev

TypeScript用にファイル変換

rm App.js
mkdir src
touch App.tsx

App.jsを削除
<ProjectName>直下のindex.js以外は
.js→.ts
.jsx→.tsx
に変換
tsファイルは基本src以下に作成していく

index.jsとsrc/App.tsxを以下のように編集

index.js

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

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

src/App.tsx

import * as React from 'react';
import { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

interface Props { };
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

tsconfig.jsonの生成

yarn run tcs --init
# ↑でできたtsconfig.jsonを編集

適宜変更(正直あまり理解していない)

tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "jsx": "react-native", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    /* Strict Type-Checking Options */
    "strict": true, /* Enable all strict type-checking options. */
    /* Additional Checks */
    "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
  },
  "exclude": [
    "node_modules"
  ]
}

<ProjectName>/直下にrn-cli.config.jsを作成

rn-cli.config.js

module.exports = {
    getTransformModulePath() {
      return require.resolve("react-native-typescript-transformer");
    },
    getSourceExts() {
      return ["ts", "tsx"];
    }
  };

実行

react-native run-ios
# または
react-native run-android

↑を実行するとおそらくターミナルで自動的にMetroBundlerが起動するが，
ごちゃごちゃやってると起動しなかったりするので．

react-native start

で手動で起動させることができる

すでにポートが使われている場合は，起動しないので，
lsofで探してそいつをkillでたぶん起動する

lsof -i:8081
kill -9 <使っているポートのPID>

終わりに

redux感がまったくないけどまあどれをaddすればいいかメモということで，
最終版はこんな感じ
https://github.com/kmdkuk/startUp

参考

https://qiita.com/uryyyyyyy/items/3ad88cf9ca9393335f8c
https://qiita.com/natmark/items/0f2f88b11f49b3f28128