根据this RN版本,现在我们可以在android中使用overflow:'visible'
。但是,React Native Android仍然剪裁了其Children视图。考虑以下代码
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, ScrollView,FlatList } from 'react-native';
type Props = {};
export default class App extends Component<Props> {
objectValues = {
one: 'one',
two: 'one',
three: 'one',
four: 'one',
five: 'one',
six: 'one',
seven: 'one',
eight: 'one',
nine: 'one',
ten: 'one',
eleven: 'one'
}
listData=[1,2,3,4,5,6,7]
renderBody(item, index) {
return (
<View style={styles.innerContainer}>
<Text>{item}</Text>
<View style={styles.overflowStyle} />
</View>
)
}
_renderList() {
return (
<FlatList
bounces={false}
style={[{ overflow: "visible" },{ zIndex:1},{ marginLeft:50 }, { marginRight: 50 },{ backgroundColor:'black'}]}
numColumns={3}
data={this.listData}
keyExtractor={(item, index) => index}
renderItem={({ item, index }) => this.renderBody(item, index)}
/>
);
}
render() {
return (
<View style={styles.container}>
<ScrollView style={styles.scrollStyle}>
<View>
{Object.keys(this.objectValues)
.map((key, index) => {
console.log(key)
return this._renderList()
})}
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
innerContainer: {
marginRight: 10,
overflow:'visible',
marginTop:10,
height: 100,
flex:1,
backgroundColor: 'green',
zIndex:1
},
overflowStyle: {
height: 20,
width: 30,
backgroundColor: 'red',
position: 'absolute',
left: -20,
top: 50,
zIndex:10
},
scrollStyle:{
overflow:'visible',
zIndex:1,
backgroundColor:'white'
}
});
代码像这样在iOS中运行
但是在Android中,它的显示是这样的。父视图裁剪其子视图。在我的情况下,父母是ScrollView
所以我的问题是,他们是否已解决此问题?还是我的代码中有什么问题?请帮助
答案 0 :(得分:0)
我也遇到了这个问题,我可以通过为父视图提供透明背景色来解决。