Вы можете визуализировать обычный View или ScrollView на основе некоторого условия, рассмотрите этот пример:
class MyComponent extends React.Component {
constructor(props){
super(props)
this.state = {
childHeight: 0,
screenHeight: Dimensions.get('window').height
}
}
render(){
const wrapper = this.state.childHeight > this.state.screenHeight ? ScrollView : View
return (
<Wrapper>
//onLayout passes a an object with a synthetic event that has a nativeEvent prop
//I pull off the nativeEvent prop using deconstruction so I can get the height
<View onLayout={
({ nativeEvent }) => {
this.setState({ childHeight: nativeEvent.layout.height })
}}>
{children}
</View>
</Wrapper>
)
}
}
Это всего лишь одна реализация, вы можете делать это как хотите. Вот еще немного информации о onLayout prop.
Если вы не можете или не хотите использовать вид, вам придется выполнить какой-либо другой вид расчета макета. Одним из способов является манипулирование вашими стилями и поддержкой детей:
const myStyle = StyleSheet.create({
childStyle: {
height: 180
}
})
class MyComponent extends React.Component {
constructor(props){
super(props)
this.state = {
childHeight: React.Children.count(props.children) * 180,
//get the count of how many children have been passed to your component
//and multiple it by whatever height your children have set in their styles
screenHeight: Dimensions.get('window').height
}
render(){
const wrapper = this.state.childHeight > this.state.screenHeight ? ScrollView : View
return (
<Wrapper>
{children}
</Wrapper>
)
}
}
Если число детей может изменяться в течение нескольких рендеров, я бы посоветовал узнать о компоненте FlatList