자주 사용하는 react-native 태그 알아보기 -Button

react-native에는 버튼 태그가 따로 존재한다.

 <Button
            title="다음"
            color="#666666"
            onPress={() => {
              navigation.navigate("changePw");
            }}
          />

 예시처럼 버튼 안에 title로 버튼의 이름을 지정할 수 있고 color로 글자 색깔을 지정할 수 있다.

다만 Button 태그 하나로는 color만 변경 가능하고 폰트 변경 및 사이즈 변경 불가하다는 커스텀의 한계가 있다.

 

Button · React Native

 

위 사이트에서 더 자세하게 알 수 있지만 커스터마이징을 하기 위해 내가 사용한 방법은 아래의 예시와 같다.

 

<View style={styles.nextBtn}>
          <Button
            title="다음"
            color="#666666"
            onPress={() => {
              navigation.navigate("changePw");
            }}
          />
 </View>

View를 활용하여 스타일을 변경한 후 감싸주거나

<TouchableWithoutFeedback>
     <View style={styles.shortBtn}>
       <Text style={styles.nextBtnTxt}>확인</Text>
     </View>
</TouchableWithoutFeedback>

<TouchableOpacity>
 <View style={styles.shortBtn}>
  <Text style={styles.nextBtnTxt}>확인</Text>
 </View>
</TouchableOpacity>

TouchableOpacity나 TouchableWithoutFeedback 혹은 Pressable을 활용하여 커스텀 하는 방법을 사용했다.

<Pressable>
 <View style={styles.shortBtn}>
  <Text style={styles.nextBtnTxt}>확인</Text>
 </View>
</Pressable>

 

여기서 제한 사항이 있는데 View는 onPress를 지원하지 않는다. 따라서 클릭이 필요한 경우는 View를 활용하지 않는 것이 좋다.