Question

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>
    );
  }
}

我试图创建一个新的模态，当我尝试在View的模态组件中放置最后一个文本元素“ sample two”时，我失败了。 “样本二”显示在视图外部。我将发布

的屏幕截图

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

Answer 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>
    );
}

Answer 2

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

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

子组件从父组件溢出

2 个答案: