React Native - tại sao padding không hoạt động?

Question

Tại sao padding không bao giờ hoạt động trong React Native? Tôi có 10px đệm trong hình ảnh và hộp văn bản dưới đây:

const styles = StyleSheet.create({ 
    container: { 
     marginTop: 75, 
     alignItems: 'center' 
    }, 
    image: { 
     width: 107, 
     height: 165, 
     padding: 10, 
     backgroundColor:'blue' 
    }, 
    description: { 
     padding: 20, 
     margin: 10, 
     fontSize: 15, 
     color: '#656565', 
     backgroundColor:'red' 
    } 
}); 

Kết quả:

Bất cứ ý tưởng tại sao? Tôi đã bỏ lỡ một cái gì đó?

Answer 1

Android với React Native có xu hướng không thích đệm, trừ khi nó có đường viền. Bản sửa lỗi tạm thời sẽ là thay đổi tất cả "paddingXXX" thành "marginXXX" của bạn để có được kiểu dáng gần đúng mà bạn muốn.

const styles = StyleSheet.create({ 
container: { 
    marginTop: 75, 
    alignItems: 'center' 
}, 
image: { 
    width: 107, 
    height: 165, 
    margin: 10, 
    backgroundColor:'blue' 
}, 
description: { 
    margin: 30, 
    fontSize: 15, 
    color: '#656565', 
    backgroundColor:'red' 
} 
}); 

Đó là một giải pháp thực sự tồi tệ, nhưng tôi chưa thấy bản sửa lỗi ngắn gọn cho nó. Theo tôi biết, có một vấn đề trên repo Git nhưng chưa được sửa.

Answer 2

Vấn đề đệm cho Android được khắc phục trong phiên bản v0.31.0 gốc có phản ứng. để biết thêm chi tiết, bạn có thể truy cập phản hồi-natvie changelog https://github.com/facebook/react-native/releases