文本可见但不是同一覆盖块中的 2 个按钮

问题描述

我正在向 React Native 0.62.3 应用添加一个叠加层（react-native-element 3.2）。页面以Native Base 2.13.14 排列。我之前注意到 Native Base 页面与 react-native-elements 或原生元素不符。代码如下：

import { Container,Left,Right,Body,Icon,Header,Text,Button,Content,Form,Textarea,Card,CardItem } from 'native-base';
import { Col,Row,Grid } from 'react-native-easy-grid';
import {Overlay} from 'react-native-elements';

return (
               
        <Container style={styles.container}>
            
                <Header>
                    <Left>
                        <Button onPress={showOverlay} transparent>
                        <Icon name="arrow-back-sharp" />
                        </Button>
                    </Left>
                    
                    <Right>
                        <ReturnButton type={"forTrade"} />
                        <ReturnButton type={"forsale"} />
                        <Button onPress={clickSave} disabled={!post} transparent>
                            <Icon name='checkmark-outline' />
                        </Button>  
                    </Right>
                </Header>
                
                <Content style={styles.contentContainer}
                    showsHorizontalScrollIndicator={false}
                    showsverticalScrollIndicator={false}
                    >
                        <Form>
                            <TextInput onChangeText={nameChange} placeholder={'作品名称'} value={name} />
                            <TextInput onChangeText={authorChange} placeholder={'作者'} value={author} />
                            
                            <TextInput keyboardType={'number-pad'} autoFocus={true} value={price.toString()} onChangeText={priceChange} placeholder={'卖价'} />
                            <TextInput keyboardType={'number-pad'} value={shippingCost.toString()} onChangeText={shChange} placeholder={'运费'} />
                            
                            <Textarea padder rowSpan={2} bordered placeholder={'介绍'} onChangeText={despChange} value={description} />
                        </Form>
                        
                        <displayImages pics={imgs} deleteImage={()=>{}} noDelete={true} updateImage={() => {}} swipeImage={swipeImage}/> 
                        
                </Content>
                
                    //<<==below is the overlay
                    <Overlay isVisible={isOverlayVisible} onBackdropPress={toggleOverlay}>
                            <View style={{position:"relative",width:200,paddingTop:10,alignContents:"top",alignItems:"center"}}>
                                <Text>I am here</Text>
                                <Button onPress={sellerMakeDeposit} title="存保证金" />
                                <Button onPress={sellerCancel} title="下市" />
                            </View>
                    </Overlay>  
                
                
                <Footerbar />              
                
        </Container>
    );
};

const styles = StyleSheet.create({
    modalContainer: {  
        flex: 1,alignItems: 'center',justifyContent: 'center',backgroundColor: '#ecf0f1',},modal: {  
        justifyContent: 'center',//backgroundColor : "#00BCD4",height: 200,width: '67%',borderRadius:10,borderWidth: 1,borderColor: 'black',marginTop: 80,marginLeft: 50,modealOpacity: {
        flex:1,tags:{

    },row:{
        paddingTop:0,content:{

    //alignContent:"center",container: {
        paddingTop:0,//justifyContent: 'center',contentContainer: {
        paddingTop:2,paddingLeft: 10,paddingRight:10,backgroundColor: '#F5FCFF',});

这是显示的页面：

是可见的。然而，2 个按钮无处可见。尝试设置 height:400 但按钮仍然不可见。如何使按钮适合覆盖屏幕？

解决方法

尝试修改您的 Overlay 块，如下所示：

<Overlay isVisible={isOverlayVisible} onBackdropPress={toggleOverlay}>
        <View
          style={{
            position: 'relative',width: 200,paddingTop: 10,alignContents: 'top',alignItems: 'center',}}>
          <Text>I am here</Text>
          <View
            style={{
              flexDirection: 'row',}}>
            <Button style={{ margin: 5 }} onPress={sellerMakeDeposit}>
              <Text>存保证金</Text>
            </Button>
            <Button style={{ margin: 5 }} onPress={sellerCancel}>
              <Text>下市</Text>
            </Button>
          </View>
        </View>
      </Overlay>

,

以这种方式使用您的按钮：

<Button><Text>Hello world</Text></Button>

注意文本由 <Text> 组件包裹。

这里是 link to the solution I think is the best，即使它不是被选中的，这里是一个小 button comparison on snack Expo（在 android 上运行它，出于不明原因，您需要触发渲染以制作本机-base 按钮​​出现）。