Вы можете визуализировать обычный 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 (
//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
{
this.setState({ childHeight: nativeEvent.layout.height })
}}>
{children}
)
}
}
Это всего лишь одна реализация, вы можете сделать это так, как вам нравится. Вот еще немного информации о 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 (
{children}
)
}
}
Если число детей может меняться в течение нескольких визуализаций, я бы предложил узнать о компоненте FlatList
Тем временем я создал этот вспомогательный метод, потому что похоже, что нет того, что я ищу:
def pluralize_word(count, singular, plural = nil)
((count == 1 || count == '1') ? singular : (plural || singular.pluralize))
end
Это чрезвычайно идентично pluralize методу, за исключением того, что это удаляет число из передней стороны. Это позволяет мне делать этот (haml):
%span.label= things.size.to_s
%description= pluralize_word(things.size, 'thing')
Это использует класс направляющих TextHelper, который использует Inflector, чтобы сделать плюрализацию в случае необходимости.
def pluralize_with_html(count, word)
"<span>#{count}</span> #{TextHelper.pluralize(count, word)}"
end