React Native ScrollView 高度问题

Question

我想创建一个水平滚动视图，但我遇到了一些问题。 ScrollView 占据了我屏幕的所有剩余 space，但我想要的是 ScrollView 只占据最大 children 的高度。我怎样才能做到这一点？

我试过为样式设置一个固定的高度，但是没有用。有帮助吗？

<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
}

});

Answer 1

就像@Vignesh 说的那样，这应该可以完成工作

<ScrollView contentContainerStyle={{flexGrow: 1} ... >

Answer 2

给你一个小技巧：获取最大尺寸并将其设置为滚动视图

<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>

编辑：

你显然需要玩一下 flex 或设置一个高度来第一次渲染组件

Answer 3

我刚刚尝试在 ScrollView 的样式上添加 {flexGrow: 0}，现在可以了。它只需要 space 就足以包含子组件。

Answer 4

试试这个：

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

之后View会根据ScrollView的高度获取高度。

React Native ScrollView 高度问题

React Native ScrollView height issues

javascript

reactjs

react-native

react-native-scrollview