javascript - Làm thế nào để xác định chiều rộng theo phần trăm trong react native?

Tôi đang cố gắng tạo một view với viền xung quanh, được căn giữa và chiếm 80% màn hình. Tôi đã nghĩ ra như sau:

<View style={{flexDirection: 'row'}}>
  <View style={{flex: .1}} />
  <View style={{flex: .8, borderWidth: 2}} />
  <View style={{flex: .1}} />
</View>

cái đó hoạt động, nhưng có vẻ quá dài dòng.

Có cách nào tốt hơn (ngắn gọn hơn) để tạo một view chiếm một phần trăm nhất định của chiều rộng màn hình và được căn giữa trên trang không?

Câu trả lời #1

CẬP NHẬT:

Bắt đầu từ phiên bản React Native 0.42, chúng ta hiện nay đã có hỗ trợ tỷ lệ phần trăm đầy đủ cho width, height, padding và các thứ khác, xem danh sách đầy đủ và các ví dụ tại đây: https://github.com/facebook/react-native/commit/3f49e743bea730907066677c7cbfbb1260677d11

Phương pháp cũ:

Hãy xem xét sử dụng Dimensions, như:

import Dimensions from 'Dimensions';

và sau đó trong kiểu của phần tử:

width: Dimensions.get('window').width / 100 * 80,

Ví dụ thực hành: https://rnplay.org/apps/4pdwlg