ScrollView 中的 React Native v0.42 flexbox 错误答案

【问题标题】：React Native v0.42 flexbox error in ScrollViewScrollView 中的 React Native v0.42 flexbox 错误
【发布时间】：2017-10-10 01:03:36
【问题描述】：

我的 React Native 渲染代码是：

<ScrollView
  contentContainerStyle={{
    minHeight: 100,
    flexDirection: "column",
    alignItems: "stretch",
    marginTop: 16,
  }}
  alwaysBounceVertical={false}
  showsVerticalScrollIndicator={false}
>
    <View style={{flex: 0.5, backgroundColor: "green"}}>
        <View style={{height: 10, backgroundColor: "yellow"}}/>
    </View>
    <View style={{flex: 0.5, backgroundColor: "blue"}}/>
</ScrollView>

上面的代码应该渲染 2 个视图，每个高度为 50，顶部 1 个绿色，底部 1 个黄色。在顶视图内部，应该有一个高度为 10 的黄色视图。

相反，它渲染了高度为 60 的顶视图和高度为 50 的底框。顶框内部有一个高度为 10 的框。颜色都正确。

但是，如果我将 height:10 部分更改为 height:"20%"，则一切正常。

我该如何解决这个问题？

谢谢。

【问题讨论】：

标签： android ios react-native flexbox scrollview

【解决方案1】：

您可以绝对定位黄色视图：

<ScrollView
  contentContainerStyle={{
    minHeight: 100,
    flexDirection: "column",
    alignItems: "stretch",
    marginTop: 16,
  }}
  alwaysBounceVertical={false}
  showsVerticalScrollIndicator={false}
>
  <View style={{flex: 0.5, backgroundColor: "green"}}>
    <View style={{
      height: 10, 
      backgroundColor: "yellow", 
      position: 'absolute',
      top: 0, left: 0, right: 0 
    }}/>
  </View>
  <View style={{flex: 0.5, backgroundColor: "blue"}}/>
</ScrollView>

或者在 ScrollView 上使用固定高度：

<ScrollView
  contentContainerStyle={{
    height: 100,
    flexDirection: "column",
    alignItems: "stretch",
    marginTop: 16,
  }}
  alwaysBounceVertical={false}
  showsVerticalScrollIndicator={false}
>

【讨论】：

感谢您的回复。但是您指定的行为不是我想要的。也就是说，我要你灵活布局。我觉得这是 ScrollView 的 react native 实现中的一个错误。你觉得这样对吗？
不确定我是否得到与我建议的第一个选项的区别。黄色视图应该具有流动高度还是固定高度？
问题在于绝对定位。这不是我想要的。虽然感谢您的帮助。我现在已经想出了解决方案。看我的回答

【解决方案2】：

解决这个问题的方法是将“绿色”视图包装在一个组件中，例如（我正在使用 typescript）：

class VerticalScrollingContentContainer extends
    React.PureComponent<{style?: Styles},
    {mainViewHeight: number, isMeasured: boolean}> {

constructor(props: any) {
    super(props);
    this.state = {
        mainViewHeight: 0,
        isMeasured: false,
    };
}

layoutReceived = (width: number, height: number) => {
    let newHeight = height > width ? height : width;
    this.setState(
        oldState => ({mainViewHeight: newHeight, isMeasured: true})
    );
}

render() {
    let isMeasured = this.state.isMeasured;
    let mainViewHeight = this.state.mainViewHeight;
    let innerContainerLayout = {
        flexDirection: "column",
    };
    if (!isMeasured) {
        innerContainerLayout = {
            ...innerContainerLayout,
            flex: 1
        };
    } else {
        innerContainerLayout = {
            ...innerContainerLayout,
            minHeight: mainViewHeight
        };
    }
    return (
        <ScrollView
            style={{flex: 1}}
            contentContainerStyle={innerContainerLayout as any}
            alwaysBounceVertical={false}
            showsVerticalScrollIndicator={false}>
            <View
                style={[
                    {
                        flexGrow: 1,
                        alignItems: "flex-start",
                        flexDirection: "column",
                    },
                    this.props.style
                ]}
                onLayout={(e) => {
                    this.layoutReceived(e.nativeEvent.layout.width, e.nativeEvent.layout.height); }}>
                {this.props.children}
            </View>
        </ScrollView>
    );
}

}

【讨论】：