即使更新为RN 0.58.4,

时间:2019-02-14 14:44:10

标签: android react-native react-native-android

根据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中运行

enter image description here

但是在Android中,它的显示是这样的。父视图裁剪其子视图。在我的情况下,父母是ScrollView

enter image description here

所以我的问题是,他们是否已解决此问题?还是我的代码中有什么问题?请帮助

展览链接:: https://snack.expo.io/ryZwe-mHN

1 个答案:

答案 0 :(得分:0)

我也遇到了这个问题,我可以通过为父视图提供透明背景色来解决。