Текст виден, но не две кнопки в одном блоке наложения

Я добавляю наложение (react-native-element 3.2) в приложение React Native 0.62.3. Страница организована с помощью 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',  
        alignItems: '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 а кнопка все равно не видна. Как сделать так, чтобы кнопка помещалась в оверлейный экран?


react-native overlay css native-base react-native-elements
person user938363    schedule 03.03.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте изменить свой блок 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>
person Ketan Ramteke    schedule 03.03.2021
comment
Ketan Ramteke, работай как шарм. Большое спасибо. - person user938363; 03.03.2021
comment
Почему здесь использовались 2 блока ‹View›? Не работал один блок ‹View›. - person user938363; 03.03.2021
comment
Хотел отобразить их в строке, вы можете удалить его, если вы согласны с тем, чтобы они были в одном столбце. - person Ketan Ramteke; 04.03.2021

arrow_upward
1
arrow_downward

Используйте кнопку таким образом:

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

Обратите внимание, что текст заключен в компонент <Text>.

Вот ссылка на решение, которое я считаю лучшим, даже если оно не выбрано, а вот небольшой сравнение кнопок на выставке закусок (запустите его на Android, и по непонятной причине вам нужно чтобы вызвать рендеринг, чтобы появилась кнопка нативной базы).

person Quentin Grisel    schedule 03.03.2021