为什么当视图放在ScrollView中以反应原生时，flexDirection不起作用？

Question

为什么当视图放在ScrollView中以反应原生时，flexDirection不起作用？

当我的视图没有放在scrollview中时，参数flexDirection：＆＃39; row＆＃39;工作正常。

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

此代码有效：

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

Answer 2

我遇到了这个问题。

想想会发生什么，stickyHeaderIndices会覆盖受影响的View中的某些样式。 只需将要包装的视图包装在一起即可解决问题，即

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

将flexDirection放入contentContainerStyle中，尝试这种方式：

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

   <View> 

  </View>

  <View> 

  </View>

</ScrollView>