Согласно этой версии RN, теперь мы можем использовать overflow:'visible' в Android.Но все же React Native Android обрезает свой детский вид.рассмотрим приведенный ниже код
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
Итак, мой вопрос, они исправили эту проблему или нет?ИЛИ есть ли проблема в моем коде?помогите пожалуйста
выставочная ссылка :: https://snack.expo.io/ryZwe-mHN