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를 사용하여 앱을 실행했습니다.
