開発環境↓
react-native-cli: 2.0.1
react-native: 0.63.2
npm: 6.13.0
使用ライブラリ↓
react-native-router-flex
react-native-navBor
react-nativeにはナビゲーションバーを自由にカスタマイズできるreact-native-navbarというライブラリが
あります。このライブラリは、オリジナルのナビゲーションバー作成後以下のようにコンポーネントに組み込むだけで
ナビゲーションバーとコンポーネントが一緒になったページを作ることができます。
import React from ‘react’;
import { View, StyleSheet} from ‘react-native’;
import Icon from ‘react-native-vector-icons/FontAwesome’;
import NavigationBar from ‘react-native-navbar’;
import { Actions } from ‘react-native-router-flux’;
const rightButtonConfig = {
title: ‘Save’,
tintColor: ‘blue’,
handler: () => console.log(‘Saved’),
};
const titleConfig = {
title: ‘Home’,
};
const MainNavigationBar = (props) => {
return (
<View>
<NavigationBar
title={titleConfig}
rightButton={rightButtonConfig}
leftButton={
<Icon name=”home” size={30} onPress={() => Actions.pop()} />
}
style={styles.container}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: ‘#ADD8E6’,
},
});
export default MainNavigationBar;
screen↓
render(
return {
<view>
<MainNavigationBar/>
</view>
}
)
コンポーネントに差し込むだけで動作する便利なライブラリですが最新のreact-nativeとどうも相性が悪いのかコンポーネント作成後
謎の警告が必ず一回だけ表示されます。
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See … for details.
- Move data fetching code or side effects to componentDidUpdate.
- If you’re updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: ***
- Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run
npx react-codemod rename-unsafe-lifecyclesin your project source folder.
という警告が出てきます。
訳↓
componentWillReceivePropsは古いのでなるべく使うのは避けてください。
UNSAFE_componentWillReceivePropsを使うことで警告を消すことができます
今書いているコードではcomponentWillReceivePropsは
使っていないので怪しいとしたらnode_modules内のreact-native-navbar
のファイル辺りか。
という訳でreact-native-navbarの中のファイルにcomponentWillReceivePropsに該当するコードを探してみたのですが
見つかりませんでした。
react-nativeのバージョンを下げることで表示されなくなる可能性もありますが
本番環境ではこれが出現することなく動作するので無理に削除しなくても良いとのことです。デモアプリをプレゼンターしたかったりデバッグ中煩わしい
と感じる場合はreact-native-router-flexのプロパティnavbarを使うことを
おすすめします。
こちらはreactのコンポーネントを引数として持ちます。
<Scene key="main" component={main} title="main" navBar={MainNavigationBar}/>
コンポーネントは以下のように適当に画像ボタンを作成。
<View style={styles.container}>
<StatusBar />
<View style= {styles.rowsComponent}>
<TouchableWithoutFeedback onPress={() => Actions.pop()}>
<Image source={require(‘../../../assets/baketu.png’)}style={styles.backarrowStyle} />
</TouchableWithoutFeedback>
</View>
</View>
簡単な実装はこれだけ。どちらもreact-routerを使ったことがあるならさくさく実装できそうです。
警告抜きに考えて書きやすいほうを選んでくださいね。
P.S.仕事ではreact-nativeは全く触らないので、空いた時間にreact-nativeを
いじってやると気分転換になってちょうどいい。
