이번엔 WriteScreen의 기능을 구현하겠습니다.
그리고 FeedsScreen에 WriteScreen을 열 수 있는 FloatingWriteButton도 만들어 보겠습니다.
프로젝트에 components 디렉터리를 만들고 그 안에 파일을 작성하세요
components/FloatingWriteButton
import React from 'react';
import {View, StyleSheet, Platform, Pressable} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
function FloatingWriteButton() {
return (
<View style={styles.wrapper}>
<Pressable
style={({pressed}) => [
styles.button,
Platform.OS === 'ios' && {
opacity: pressed ? 0.6 : 1,
},
]}
android_ripple={{color: 'white'}}>
<Icon name={'add'} size={24} style={styles.icon} />
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
wrapper: {
position: 'absolute',
bottom: 16,
right: 16,
width: 56,
height: 56,
borderRadius: 28,
//ios 전용 그림자 설정
shadowColor: '#4d4d4d',
shadowOffset: {width: 0, height: 4},
shadowOpacity: 0.3,
shadowRadius: 4,
//안드로이드 전용 그림자 설정
elevation: 5,
//안드로이드에서 물결 효과가 영역 밖으로 나가지 않도록 설정
//ios에서는 overflow가 hidden일 경우 그림자가 보여지지 않음
overflow: Platform.select({android: 'hidden'}),
},
button: {
width: 56,
height: 56,
borderRadius: 28,
backgroundColor: '#009688',
justifyContent: 'center',
alignItems: 'center',
},
icon: {
color: 'white',
},
});
export default FloatingWriteButton;
Pressable는 리액트 네이티브 v.63에 추가된 컴포넌트 입니다.
TouchableWithoutFeedback와 비슷하지만 기능이 더 많습니다.
android_ripple Props를 설정하여 안드로이드에서 물결 효과를 보여줄 수 있고
스타일을 설정할 때 pressed 값을 인식해 컴포넌트가 눌리면 동적인 스타일을 적용할 수도 있습니다.
이 컴포넌트의 경우 ios환경에서는 버튼이 눌렸을 때 투명도를 가지게 설정하고
안드로이드에선 물결 효과가 나타나게 만들었습니다.
또한 그림자 스타일을 주었는데 ios와 안드로이드는
그림자 설정을 하는 스타일의 이름이 다르다는걸 주의하세요
또한 안드로이드에서 물결효과가 밖으로 나가지 않도록 overflow를 설정하였으나
ios에서 설정될 경우 그림자도 안보이기 때문에
안드로이드에서만 적용되도록 하였습니다.
이제 FeedsScreen에 컴포넌트를 사용해보겠습니다
style.block에 flex :1 을 넣어줍니다.
만약 이 값이 없다면 View가 비어있을 땐 높이가 0으로 간주됩니다.
screens/FeedsScreen.js
import React, {useContext} from 'react';
import {View, StyleSheet, TextInput} from 'react-native';
import LogContext from '../contexts/LogContext';
import FloatingWriteButton from '../components/FloatingWriteButton';
function FeedsScreen() {
const {text, setText} = useContext(LogContext);
return (
<View style={styles.block}>
<FloatingWriteButton />
</View>
);
}
const styles = StyleSheet.create({
block: {
flex: 1,
},
});
export default FeedsScreen;

버튼이 생성 되었나요?
이제 해당 버튼을 누르면 wWriteScreen을 띄우도록 수정해보겠습니다.
components/FloatingWriteButton
import React from 'react';
import {View, StyleSheet, Platform, Pressable} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {useNavigation} from '@react-navigation/native';
function FloatingWriteButton() {
const navigation = useNavigation();
const onPress = () => {
navigation.navigate('Write');
};
return (
<View style={styles.wrapper}>
<Pressable
style={({pressed}) => [
styles.button,
Platform.OS === 'ios' && {
opacity: pressed ? 0.6 : 1,
},
]}
android_ripple={{color: 'white'}}
onPress={onPress}>
<Icon name={'add'} size={24} style={styles.icon} />
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
wrapper: {
position: 'absolute',
bottom: 16,
right: 16,
width: 56,
height: 56,
borderRadius: 28,
//ios 전용 그림자 설정
shadowColor: '#4d4d4d',
shadowOffset: {width: 0, height: 4},
shadowOpacity: 0.3,
shadowRadius: 4,
//안드로이드 전용 그림자 설정
elevation: 5,
//안드로이드에서 물결 효과가 영역 밖으로 나가지 않도록 설정
//ios에서는 overflow가 hidden일 경우 그림자가 보여지지 않음
overflow: Platform.select({android: 'hidden'}),
},
button: {
width: 56,
height: 56,
borderRadius: 28,
backgroundColor: '#009688',
justifyContent: 'center',
alignItems: 'center',
},
icon: {
color: 'white',
},
});
export default FloatingWriteButton;
'코딩생활 > ReactNative' 카테고리의 다른 글
[React Native] 3-6 LogContext로 배열 상태 관리하기 (0) | 2023.03.15 |
---|---|
[React Native] 3-4 WriteScreen 준비하기 (0) | 2023.03.14 |
[React Native] 3-3 useContext Hooks 함수 (0) | 2023.03.13 |
[React Native] 3-2 Context API (0) | 2023.03.13 |
[React Native] 3-1 다이어리 앱 만들기 (0) | 2023.03.10 |
댓글