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
를 사용하여 앱을 실행했습니다.
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
- Native View onPress 반응
- React Native에 이미지 포함
- React Native에서 라이브러리 연결 해제
- React Native에서 앱 이름 변경
- React Native에서 요소 정렬
- React Native에서 이미지 너비를 백분율로 설정