React Native ScrollView 高度问题答案

【问题标题】：React Native ScrollView height issuesReact Native ScrollView 高度问题
【发布时间】：2020-07-29 07:31:51
【问题描述】：

我想创建一个水平 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
}

});

【问题讨论】：

你能贴出你的代码吗？
你试过使用 flexGrow 吗？
不，我没有尝试使用 flexGrow。我可以知道我应该把它放在哪里以及为什么要放在它吗？

标签： javascript reactjs react-native react-native-scrollview

【解决方案1】：

我刚刚尝试在 ScrollView 的样式上添加 {flexGrow: 0}，现在它可以工作了。它只占用足够的空间来容纳子组件。

【讨论】：

【解决方案2】：

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

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

【讨论】：

只是尝试，但没有奏效。 ScrollView 仍然占据屏幕的剩余高度

【解决方案3】：

这里有一个技巧：获取最大尺寸并将其设置为滚动视图

<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 或者设置一个高度来第一次渲染组件

【讨论】：

【解决方案4】：

试试这个：

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

之后 View 将根据 ScrollView 的高度获得高度。

【讨论】：