android - 即使更新到 RN 0.58.4，React 本机溢出也无法在 android 中工作

问题描述

根据这个RN 发布，现在我们可以overflow:'visible'在 android 中使用。但仍然 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

所以我的问题是，他们是否解决了这个问题？或者我的代码有什么问题吗？请帮忙

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

标签： androidreact-nativereact-native-android

android - 即使更新到 RN 0.58.4，React 本机溢出也无法在 android 中工作

问题描述

解决方案

推荐阅读