React Native의 아이콘 버튼

MD Aminul Islam 2023년10월8일
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 아이콘 버튼

React 기본 아이콘 버튼 응답

react-native-paper를 설치하고 패키지를 React-Native 프로젝트로 가져와야 할 수도 있습니다.

위에서 공유한 예제 코드는 React Native에서 생성되었으며 Expo-CLI를 사용하여 앱을 실행했습니다.

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