HOWTO · React Native
React Nativeのアイコンボタン
このチュートリアルでは、React Native にアイコン ボタンを含める方法について説明します。
アイコンは、ユーザー インタラクションの最も重要な要素です。 アプリを魅力的にするだけでなく、より使いやすくします。
また、ユーザー エクスペリエンスの向上にも役立ちます。 アイコン付きのボタンは、テキストのみのボタンよりもインタラクティブです。
この記事では、React-Native アプリでアイコン付きのボタンを実装する方法を示します。 必要な例と説明を使用して、トピックについて最も深く議論します。
React Native でアイコン付きのボタンを実装する
以下の例は、React-Native アプリで基本的なアイコン ボタンを作成する方法を示しています。 コードは次のようになります。
// Importing necessary packages
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Button, Image, Text, View, Alert} from 'react-native';
import { IconButton, Colors } from 'react-native-paper';
// Our main function
export default function App() {
return ( // Creating a button with a simple action
<View style={styles.container}>
<IconButton
icon="login"
size={25}
onPress={() => Alert.alert('Button clicked !!!')}
/>
</View>
);
}
// Providing some style to our simple app.
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
margin: 50,
},
});
上記の例で共有されている手順に関して、必要なすべての行の目的は既に指示されています。
上記の例では、<IconButton /> タグを使用してアイコン ボタンを作成しました。 その中で、アイコン名icon="login"、アイコンサイズsize={25}、アイコンボタンへのシンプルなアクションonPress={() => Alert.alert('Button clicked !! ！'）}、 以上です。
上記のコード例を実行すると、画面に以下の出力が表示されます。
出力：
react-native-paper をインストールし、パッケージを React-Native プロジェクトにインポートする必要がある場合があることに注意してください。
上記のコード例は React Native で作成されており、Expo-CLI を使用してアプリを実行していることに注意してください。
