为什么将视图放置在 ScrollView 以进行本机反应时 flexDirection 不起作用？答案

【问题标题】：Why is flexDirection not working when view is placed in a ScrollView for react native?为什么将视图放置在 ScrollView 以进行本机反应时 flexDirection 不起作用？
【发布时间】：2018-08-15 09:15:37
【问题描述】：

当视图被放置在滚动视图中以进行本机反应时，为什么 flexDirection 不起作用？

当我的视图没有放在滚动视图中时，参数 flexDirection: 'row' 可以正常工作。

export default class ProfileScreen extends Component {
render() {
    return (
            <View style={{flex: 0.1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
                <View style={{flex:0.2, backgroundColor: 'red'}} />
                <View style={{flex:0.8, backgroundColor: 'skyblue'}} />
                <View style={{flex:0.2, backgroundColor: 'steelblue'}} />
            </View>
    );
}

当它被放置在滚动视图中时，参数 flexDirection 不再起作用。

export default class ProfileScreen extends Component {
render() {
    return (
        <ScrollView stickyHeaderIndices={[0]} >
            <View style={{flex: 0.1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
                <View style={{flex:0.2, backgroundColor: 'red'}} />
                <View style={{flex:0.8, backgroundColor: 'skyblue'}} />
                <View style={{flex:0.2, backgroundColor: 'steelblue'}} />
            </View>
            <View style={{flex: 1, flexDirection: 'row', height: 10}} />
            <View style={{flex: 1, flexDirection: 'row', height: 200, backgroundColor: 'skyblue'}} />
            <View style={{flex: 1, flexDirection: 'row', height: 10}} />
        </ScrollView>
    );
}
}

【问题讨论】：

在此处添加样式：facebook.github.io/react-native/docs/…
你必须使用 react 文档的 contentContainerStyle

标签： css react-native flexbox scrollview

【解决方案1】：

此代码有效：

export default class ProfileScreen extends Component {
render() {
    return (
        <ScrollView stickyHeaderIndices={[0]} style={{flex:1}}>
            <View style={{flex: 0.1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
                <View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-start', height:70}}>
                    <View style={{flex:0.2, backgroundColor: 'red'}} />
                    <View style={{flex:0.8, backgroundColor: 'skyblue'}} />
                    <View style={{flex:0.2, backgroundColor: 'steelblue'}} />
                </View>
            </View>
            <View style={{flex: 1, flexDirection: 'row', height: 10}} />
            <View style={{flex: 1, flexDirection: 'row', height: 200, backgroundColor: 'skyblue'}} />
            <View style={{flex: 1, flexDirection: 'row', height: 10}} />
        </ScrollView>
    );
  }
}

【讨论】：

用另一个用 flexDirection 设置样式的视图容器包装我的粘性组件也确实解决了我的问题。感谢您的帮助！

【解决方案2】：

我遇到了这个问题。

想想会发生什么，stickyHeaderIndices 覆盖了受影响视图中的一些样式。只需将要粘贴的视图与另一个视图一起包装即可解决问题，即

...
  <ScrollView stickyHeaderIndices={[0]} >
    <View>
      <View style={{flex: 0.1, flexDirection: 'row', ... }}>
         <View style={{flex:0.2, backgroundColor: 'red'}} />
         <View style={{flex:0.8, backgroundColor: 'skyblue'}} />
         <View style={{flex:0.2, backgroundColor: 'steelblue'}} />
       </View>
    </View>
    
   ...
   </ScrollView>

【讨论】：

【解决方案3】：

将 flexDirection 放在 contentContainerStyle 中，试试这个方法：

 <ScrollView style={{Your Style}} contentContainerStyle={{flexDirection:'row'}}>

   <View> 

  </View>

  <View> 

  </View>

</ScrollView>

【讨论】：