Cách triển khai nút radio trong React Native

Question

Tôi đang chuyển đổi mã React thành React Native. Vì vậy, tôi cần phải thực hiện các nút radio.

Answer 1

Có một thành phần phản ứng bản địa gọi là react-native-radio-buttons có thể làm một số những gì bạn cần:

Answer 2

Bạn có thể bắt chước một nút radio thực sự dễ dàng sử dụng RN chỉ barebones. Đây là một triển khai đơn giản mà tôi sử dụng. Tweak kích thước, màu sắc vv như bạn muốn. Nó trông như thế này (với một màu sắc khác nhau, và một số văn bản). Thêm TouchableOpacity lên trên để biến nó thành nút làm điều gì đó.

function RadioButton(props) { 
    return (
     <View style={[{ 
     height: 24, 
     width: 24, 
     borderRadius: 12, 
     borderWidth: 2, 
     borderColor: '#000', 
     alignItems: 'center', 
     justifyContent: 'center', 
     }, props.style]}> 
     { 
      props.selected ? 
      <View style={{ 
       height: 12, 
       width: 12, 
       borderRadius: 6, 
       backgroundColor: '#000', 
      }}/> 
      : null 
     } 
     </View> 
); 
}