子组件从父组件溢出答案

【问题标题】：child component overflow from parent component子组件从父组件溢出
【发布时间】：2019-05-05 09:26:42
【问题描述】：

import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';

export default class AlertModal extends Component {
    constructor(props){
        super(props)
        this.state={
            check:'234',
            primaryColor:'#dcdcdc',
            secondaryColor:'#ff1493',
            fontFamily:'sans-serif',
            one:'Alert',
            two:'sample text'
        }
    }
state = {
    modalVisible: false,
};

setModalVisible(visible) {
    this.setState({modalVisible: visible});
}

render() {
    return (
        <Modal
            animationType="slide"
            transparent={false}
            visible={this.state.modalVisible}
            onRequestClose={() => {
                Alert.alert('Modal has been closed.');
        }}>
        <View 
            style={{
                top:'39%',
                backgroundColor:this.state.primaryColor,
                height:'25%',
                width:'70%',
                alignSelf:'center'
            }}>

        <Text 
            style={{
                fontWeight:'500',
                fontFamily:this.state.fontFamily,
                alignSelf:'center',
                fontSize:30,
                color:this.state.secondaryColor
        }}>
            {this.state.one}
        </Text>

        <View
            style={{
                borderBottomColor: 'black',
                borderBottomWidth: 1,
                top:'3%'
            }}
        />

        <Text 
            style={{
                fontFamily:this.state.fontFamily,
                alignSelf:'center',
                color:this.state.secondaryColor,
                top:'100%'
            }}>
            {this.state.two}
        </Text>
        </View>
    </Modal>
    );
  }
}

我正在尝试创建一个新的模态，当我尝试在视图中的模态组件中定位最后一个文本元素“示例二”时，我失败了。 “样品二”显示在视图之外。我将发布我得到的截图

但我需要将示例文本放在框的末尾，我不知道为什么它会显示在框外。

【问题讨论】：

标签： react-native

【解决方案1】：

只需将其包裹在另一个视图中，如下所示。

render() {
    return (
        <Modal
            animationType="slide"
            transparent={false}
            visible={!this.state.modalVisible}
            onRequestClose={() => {
                Alert.alert('Modal has been closed.');
            }}>
        <View
            style={{
            top: '39%',
            backgroundColor: this.state.primaryColor,
            height: '25%',
            width: '70%',
            alignSelf: 'center',
            borderWidth: 1,
            borderColor: 'red',
        }}>
        <Text
            style={{
                fontWeight: '500',
                fontFamily: this.state.fontFamily,
                alignSelf: 'center',
                fontSize: 30,
                color: this.state.secondaryColor,
            }}>
            {this.state.one}
        </Text>
        <View
            style={{
                borderBottomColor: 'black',
                borderBottomWidth: 1,
                top: '3%',
            }}
        />
            <View>
                <Text
                    style={{
                        fontFamily: this.state.fontFamily,
                        alignSelf: 'center',
                        color: this.state.secondaryColor,
                        top: '100%',
                    }}>
                    {this.state.two}
                </Text>
                </View>
            </View>
        </Modal>
    );
}

【讨论】：

【解决方案2】：

top: '100%', 将Text 移出，将其更改为50%

<Text
  style={{
    fontFamily: this.state.fontFamily,
    alignSelf: 'center',
    color: this.state.secondaryColor,
    top: '50%',
  }}>
    {this.state.two}
</Text>

【讨论】：