詰まってたところをまとめていきます
React Native + TypeScript + VSCode + Expoで開発しています
実機使ってます

コードの書き方

複数のスタイルを適用する

例: styles.textBigとstyles.textBoldの2つのスタイルを<Text>に適用させたい

書き方1: スプレッド演算子を使う

<Text style={{ ...styles.textBig, ...styles.textBold }}>てきすとだよ</Text>

書き方2: 配列にいれる

<Text style={[styles.textBig, styles.textBold]}>てきすとだよ</Text>

`navigation.state.routeName`を使うときの型定義

type NavigationState = {
  routeName: string;
  key: string;
};

interface Props {
  navigation: NavigationScreenProp<NavigationState, NavigationParams>;
}

NavigationStateを書かないと、navigation.stateにrouteNameプロパティはないと言われます
なので、NavigationStateがどんなオブジェクトかを明示する必要があります
.routeNameとかを使わない場合はいらないです

stateについての React-Navigation API reference:
https://reactnavigation.org/docs/en/navigation-prop.html#state-the-screens-current-state-route

React-Navigation + TypeScriptの dev.to 記事
https://dev.to/andreasbergqvist/react-navigation-with-typescript-29ka

`navigationOptions`の型定義

注意: もっといい書き方があるかも

たとえば、画面のタイトルを設定したいときとかはこう書きます

HogeScreen.navigationOptions = () => ({
  title: 'ほげ画面',
});

このとき、HogeScreenの型をこのように書くとTSからおこられます

interface HogeProps {
  ...
}

const HogeScreen: React.FC<HogeProps> = props => ({
  ...
})

そこで、HogeScreenの型をReact.FCとNavigationStackScreenComponentのintersectionとして定義します

const HogeScreen: React.FC<HogeProps> & NavigationStackScreenComponent = props => ({
  ...
})

navigationを使う + 型定義

たとえば、TouchableOpacityで、別の画面に遷移させたいときは

onPress={() => props.navigation.navigate('AnotherScreen')}

と書きます

propsをコンポーネントにわたす方法はこう↓

/* propsにnavigationしかないとき */
const FooComponent = ({ navigation }) => {
  return (
    // 省略
  )
}

/* propsにnavigation以外もあるとき */
import {
  NavigationParams,
  NavigationScreenProp,
  NavigationState,
} from 'react-navigation';

interface Props {
  hogeProp: number;
  navigation: NavigationScreenProp<NavigationState, NavigationParams>
}
const FooComponent = (props: Props) => {
  return (
    // 省略
  )
}

React Navigation の docs: https://reactnavigation.org/docs/en/navigating.html
React NavigationをTypeScriptで使う記事: https://dev.to/andreasbergqvist/react-navigation-with-typescript-29ka

conditional と 2つ以上の関数


isFoo ? (hoge(), bar()) : console.log('not foo')

カンマでつないで()でくくると三項演算子でも複数の関数が呼べる

typeの拡張

このような書き方ができます

ExtendedProps = {
   isDisabled?: boolean,
   isError?: boolean,
   ...
}
// combining two types
type FullProps = BaseProps & ExtendedProps;

// or attaching properties to a type
type FullProps = BaseProps & {
   isDisabled?: boolean,
   isError?: boolean,
   ...
}

引用元: https://medium.com/@rossbulat/typescript-react-manipulating-prop-types-ec13f841a550

React Native の挙動

ScrollView の `contentContainerStyle` と `style` の違い

style: この図のグレーの箱
contentContainerStyle: この図の青いスクロールする中身

StackOverflowのこの記事から翻訳しました
https://stackoverflow.com/questions/52892304/style-vs-contentcontainerstyle-in-scrollview

ScrollViewが上に戻る

スクロールしても上にﾋｭﾝって戻っちゃう現象
対処方法:
1. contentContainerStyleでpaddingBottomを適当に設定する
2. styleでScrollViewの高さを設定する
heightで指定, flexとかだとうまくいかないことがある

Expoで困ったところ

`console.log`を出力してくれない

expoで開発してるのになぜかターミナルで console.log() を吐いてくれない状況

対処法: iPhoneの名前からASCII文字を取り除く

Settings > General > About > Nameで変更できます
✗「ほげほげのiPhone」
○「hogehoge iPhone」

ソース: https://forums.expo.io/t/not-getting-console-log-with-expo-cli-on-ios-12-1-4-iphone-7/19272/4

[更新中] React Native 開発めも