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

Question

当视图放置在 ScrollView 中以进行本机反应时，为什么 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>
    );
}
}

Answer 1

我遇到了这个问题。

想想会发生什么，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>

Answer 2

将 flexDirection 放在 contentContainerStyle 中，试试这样：

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

   <View> 

  </View>

  <View> 

  </View>

</ScrollView>

Answer 3

这段代码的工作原理：

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