React Nativeのアイコンボタン

MD Aminul Islam 2024年2月15日
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 ネイティブ アイコン ボタン

React Native Icon Button Response

react-native-paper をインストールし、パッケージを React-Native プロジェクトにインポートする必要がある場合があることに注意してください。

上記のコード例は React Native で作成されており、Expo-CLI を使用してアプリを実行していることに注意してください。

著者: MD Aminul Islam
MD Aminul Islam avatar MD Aminul Islam avatar

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

LinkedIn

関連記事 - React Native

関連記事 - React Native Element