react-navigationをインストール・使用してみた
react-nativeで画面遷移をするライブラリは複数ありますが、自分の使った
ことのあるライブラリはreact-native-router-flexだけ。
こちらは画面遷移に関しては少ないコードで楽々実装できたのですが、
公式がもう何年も更新していなく、多分今後も更新しない・他のライブラリに乗り換えを
推奨しているとみて捨てる事にしました。
代わりにreact-navigationを使って画面遷移をすることにしました。
react-native-router-flexとそこまで様式は変わらないですが、しいていうなら壊れにくい
(制約が多々あってそれを破ってコーディングすると即死する)点ですかね。
これがなかなか煩わしくて何どもいらつかせられました。
こっちは比較的自由なコーディングが許されているっぽいので快適さは実装していく上で
感じると思います。
実装方法はこちら。(expoでのインストール・実装となります)
npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack
import React, { Component } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './Home';
class App extends Component {
constructor(props) {
super(props);
}
render() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home">
{props => <Home {...props} />}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
);
}
}
export default App;
遷移したページはStackとしてHomeと同じ様に追加していけばokです。
