当 View 放置在 ScrollView 中以进行原生 react 时,为什么 flexDirection 不起作用?
当我的 View 未放置在 ScrollView 中时,参数 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>
);
}
当它被放置在 ScrollView 中时,参数 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>
);
}
}
最佳答案
我遇到了这个问题。
想想发生了什么,stickyHeaderIndices
覆盖受影响 View 中的一些样式。
简单地包装你想要坚持的 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>
关于css - 当 View 放置在 ScrollView 中以进行原生 react 时,为什么 flexDirection 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49149045/