はじめに
React Nativeにてアイコンとテキストを横並びで表示する方法を紹介します。
環境
- Macbook Pro macOS Monterey
- react-native 0.68.1
- react-native-vector-icon 9.1.0
- rneui/themed 4.0.0-rc.3
実装例
利用場面って結構あると思うので、今回はコンポーネントとして切り出して、
再利用できるように作成しました。
実装例は以下の赤枠の通りです。
利用するアイコンはreact-native-vector-iconモジュールです。
以下のソースによりコンポーネントを作成しています。
引数にiconとtextを用意してあげることで再利用を可能にしています。
import { StyleSheet,View } from 'react-native';
import { Icon, Text } from '@rneui/themed';
/**
* アイコンとテキストを横並びで表示するコンポーネント
* 使用できるアイコン→https://oblador.github.io/react-native-vector-icons/
* @param icon.name react-native-vector-iconで使用できるアイコンの名前
* @param icon.type react-native-vector-iconで使用できるアイコンのタイプ
* @param text 表示するアイコンのテキスト
*/
const InlineIconText = (props) => {
// スタイル
const styles = StyleSheet.create({
container: {
paddingVertical: 5,
paddingHorizontal: 10,
flexDirection: 'row',
alignItems: 'center',
},
iconContainer: {
paddingRight: 5,
color: 'grey',
},
textContainer: {
color: 'grey',
},
});
// 画面表示
return (
<View style={ styles.container }>
<Icon name={props.icon.name} type={props.icon.type} size={15} style={ styles.iconContainer }/>
<Text style={ styles.textContainer }>{props.text}</Text>
</View>
)
}
export default InlineIconText別コンポーネントからこのコンポーネントを呼び出すには以下のように指定します。
<InlineIconText text={l.category} icon={{name: 'ticket', type: 'foundation'}}/>
コメント