Question

这是我的代码。只是反应本机程序，而我的照片中的麻烦。Android不是，IOS很棒。如何在android中破解以使其正确。

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default class TestScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text></Text>
                <View style={styles.parent}>
                    <View style={styles.children}>
                        <Text>my content </Text>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    parent: {
        width:300,
        height: 40,
        backgroundColor: 'yellow',
        alignItems:'center',
        position:'absolute',
    },
    children:{
        height:20,
        justifyContent: 'center',

        top:-10
    }
})

我该如何解决

Answer 1

Android不支持溢出：https://github.com/facebook/react-native/issues/6802

您可以尝试以下库： https://github.com/entria/react-native-view-overflow

或者您可以尝试对视图进行某种绝对定位，但这可能并不完美。下面的示例将所有视图放在一个父视图中，然后使文本偏移以使其在绝对位置上都重叠。

render() {
    return (
        <View style={styles.container}>
            <View style={{ height: 40}}/>
            <View style={{ height: 40, backgroundColor: "yellow"}}/>
            <View style={{ position: "absolute", top: 30}}>
                <Text>my content </Text>
            </View>
        </View>
    )
}

在React-Native中，Android父元素的内部子元素肯定位于要隐藏的父元素之外

1 个答案: