Làm thế nào bạn có thể nổi: ngay trong React Native?

Tôi có một yếu tố mà tôi muốn nổi ngay, ví dụ

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>

Làm thế nào có thể Textđược thả nổi / liên kết bên phải? Ngoài ra, tại sao không Textchiếm toàn bộ không gian của View, thay vì chỉ là không gian cho "Xin chào"?

tại sao Văn bản chiếm toàn bộ không gian của Chế độ xem, thay vì chỉ là không gian cho "Xin chào"?

Bởi vì Viewlà một thùng chứa flex và theo mặc định có flexDirection: 'column'và alignItems: 'stretch', điều đó có nghĩa là các phần tử con của nó phải được kéo dài ra để lấp đầy chiều rộng của nó.

(Lưu ý, theo các tài liệu , tất cả các thành phần trong React Native đều display: 'flex'mặc định và display: 'inline'hoàn toàn không tồn tại. Theo cách này, hành vi mặc định của a Texttrong a ViewReact Native khác với hành vi mặc định của spanbên trong divweb; trong trường hợp sau, khoảng thời gian sẽ không lấp đầy chiều rộng của divbởi vì a spanlà phần tử nội tuyến theo mặc định. Không có khái niệm nào như vậy trong React Native.)

Làm thế nào để Văn bản có thể được thả nổi / căn chỉnh sang phải?

Các floatbất động sản không tồn tại trong Phản ứng Native, nhưng có tải các tùy chọn có sẵn cho bạn (với hành vi hơi khác nhau) mà sẽ cho phép bạn phải sắp xếp văn bản của bạn. Đây là những cái tôi có thể nghĩ ra:

1. Sử dụng textAlign: 'right'trên Textphần tử

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

(Cách tiếp cận này không thay đổi thực tế là Textlấp đầy toàn bộ chiều rộng của Viewnó; nó chỉ đúng căn chỉnh văn bản trong Text.)

2. Sử dụng alignSelf: 'flex-end'trênText

<View>
  <Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>

Điều này thu nhỏ Textphần tử theo kích thước cần thiết để giữ nội dung của nó và đặt nó ở cuối hướng chéo (hướng ngang, theo mặc định) của View.

3. Sử dụng alignItems: 'flex-end'trênView

<View style={{alignItems: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

Điều này tương đương với việc thiết lập alignSelf: 'flex-end'cho tất cả Viewtrẻ em.

4. Sử dụng flexDirection: 'row'và justifyContent: 'flex-end'trênView

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

flexDirection: 'row'đặt hướng chính của bố cục là ngang thay vì dọc; justifyContentcũng giống như alignItems, nhưng điều khiển căn chỉnh theo hướng chính thay vì hướng chéo.

5. Sử dụng flexDirection: 'row'trên Viewvà marginLeft: 'auto'trênText

<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

Cách tiếp cận này được thể hiện, trong ngữ cảnh của web và CSS thực, tại https://stackoverflow.com/a/34063808/1709587 .

6. Sử dụng position: 'absolute'và right: 0trên Text:

<View>
  <Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>

Giống như trong CSS thực, điều này sẽ Text"hết dòng", nghĩa là anh chị em của nó sẽ có thể chồng lên nó và vị trí thẳng đứng của nó sẽ ở trên cùng Viewtheo mặc định (mặc dù bạn có thể đặt khoảng cách rõ ràng từ đỉnh của Viewsử dụng toptài sản phong cách).

Đương nhiên, phương pháp nào bạn muốn sử dụng - và liệu sự lựa chọn giữa chúng có quan trọng hay không - sẽ phụ thuộc vào hoàn cảnh chính xác của bạn.

Bạn có thể trực tiếp chỉ định căn chỉnh của mục, ví dụ:

textright: {    
  alignSelf: 'flex-end',  
},

Đối với tôi, việc thiết lập alignItemscho cha mẹ đã thực hiện thủ thuật, như:

var styles = StyleSheet.create({
  container: {
    alignItems: 'flex-end'
  }
});

Bạn không được phép sử dụng phao trong React Native. React Native tận dụng flexbox để xử lý tất cả những thứ đó.

Trong trường hợp của bạn, có lẽ bạn sẽ muốn container có thuộc tính

justifyContent: 'flex-end'

Và về văn bản chiếm toàn bộ không gian, một lần nữa, bạn cần xem qua container của bạn.

Đây là một liên kết đến hướng dẫn thực sự tuyệt vời trên flexbox: Hướng dẫn đầy đủ về Flexbox

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
  <Text>
  Some Text
  </Text>
</View>

flexDirection: Nếu bạn muốn di chuyển theo chiều ngang (hàng) hoặc theo chiều dọc (cột)

justifyContent: hướng bạn muốn di chuyển.

Bạn có thể nổi: ngay trong phản ứng gốc bằng cách sử dụng flex:

 <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

để biết thêm chi tiết: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction