反应原生高度

React Native is a popular framework that allows developers to write native iOS and Android applications using JavaScript and React. One of the key advantages of using React Native is that it provides a high level of performance, in part due to its use of "native modules". These modules are written in native code (Java, Objective-C, etc.) and expose low-level APIs that can be accessed from within JavaScript.

One way to take advantage of these native modules in React Native is to use the concept of "native height". This refers to the ability of React Native to automatically adjust the height of a component based on its content. This can be useful in situations where it's difficult to predict the amount of content that will be displayed within a component.

Setting the height of a component

By default, React Native components don't have a height set, so they will take up as much vertical space as they need. However, you can set the height of a component manually using the style property. For example, you can set the height of a View component to 100 pixels like this:

<View style={{ height: 100 }} />

Using native height

If you don't know how much content will be displayed within a component, you can use the flex property to automatically adjust its height. For example, if you have a TextInput component that can have varying amounts of text inside, you can set its height to undefined and its flex to 1:

<TextInput style={{ height: undefined, flex: 1 }} />

This will cause the TextInput to expand vertically to fit its content.

Combining native height with other styles

You can also combine native height with other styles to create more complex layouts. For example, you can use a ScrollView component to display a list of items that can have varying amounts of content. You can set the height of the ScrollView to undefined and its flex to 1, then wrap each item in a View component that has a fixed height:

<ScrollView style={{ height: undefined, flex: 1 }}>
  <View style={{ height: 50 }}>
    <Text>Item 1</Text>
  </View>
  
  <View style={{ height: 100 }}>
    <Text>Item 2</Text>
  </View>
  
  <View style={{ height: 75 }}>
    <Text>Item 3</Text>
  </View>
</ScrollView>

This will create a scrollable list where each item has a fixed height, but the height of the ScrollView adjusts to fit the total height of its contents.

Conclusion

React Native's ability to adjust the height of components based on their content can be a powerful tool for creating complex layouts. By combining native height with other styles like flex, you can create flexible and scalable UIs that work well on both iOS and Android.