Я хотел бы создать горизонтальный ScrollView, но столкнулся с некоторыми проблемами. ScrollView занимает все оставшееся пространство моего экрана, но я хочу, чтобы ScrollView принимал только высоту самых больших дочерних элементов. Как я могу этого добиться?

Я пытался установить фиксированную высоту стиля, но это не сработало. Любая помощь?

<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.guessList}>
{guessList.map((guess, index) => (
    <NumberContainer style={styles.guessItem} key={guess}>#{guessList.length - index} {guess}</NumberContainer>
))}
const styles= StyleSheet.create({
guessList: {
    height: 70
},
guessItem: {
    marginRight: 5
}

});

0
Daniel Chan 29 Июл 2020 в 10:31

4 ответа

Лучший ответ

Я просто попытался добавить {flexGrow: 0} в стиле ScrollView, и теперь он работает. Это просто занимает достаточно места для размещения детских компонентов.

0
Daniel Chan 29 Июл 2020 в 08:11

Вот вам трюк: выберите самый большой размер и установите для него режим прокрутки.

<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{height: this.state.biggest_child_height}}>
    {guessList.map((guess, index) => (
        <NumberContainer onLayout={(event) => {
            if(event.nativeEvent.layout.height > this.state.biggest_child_height){
                this.setState({biggest_child_height: event.nativeEvent.layout.height})
            }
        }} style={styles.guessItem} key={guess}>#{guessList.length - index} {guess}</NumberContainer>
    ))}
</ScrollView>

Изменить:

Очевидно, вам нужно поиграть с гибкостью или установить высоту для первого рендеринга компонента.

0
BloodyMonkey 29 Июл 2020 в 08:05

Как сказал @Vignesh, это должно сработать

<ScrollView contentContainerStyle={{flexGrow: 1} ... >
0
BloodyMonkey 29 Июл 2020 в 07:44

Попробуй это:

<View style={{maxHeight: 400, minHeight: 100}}>
   <ScrollView>
     ...
   </ScrollView>
</View>

После этого View будет иметь высоту в зависимости от высоты ScrollView.

0
M.N. 29 Июл 2020 в 09:03