css - 文本可见,但同一 Overlay 块中的 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',
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
,但按钮仍然不可见。如何使按钮适合覆盖屏幕?
解决方案
以这种方式使用你的按钮:
<Button><Text>Hello world</Text></Button>
请注意,文本由<Text>
组件包裹。
这是我认为最好的解决方案的链接,即使它不是选择的解决方案,这里是小吃博览会上的一个小按钮比较(在 android 上运行,由于不明原因,您需要触发渲染来制作本机基础按钮出现)。
推荐阅读
- android - 保存视频文件或流式传输到服务器之间的 Android 性能差异
- javascript - 如何将背景颜色更改为用户在 HTML 中输入的内容
- r - R - 平均大矩阵
- reactjs - 在另一个函数中访问当前状态
- emoji - 如何使用 RegExr 在字符串中的特定短语之后提取所有 18 个字符条目的列表?
- java - 更新 Firebase 实时数据库中的值(离线) - Android
- haskell - Haskell HDBC 库:有没有一种优雅的方式在 [SqlValue] 和记录之间进行转换?
- html - 无法用鼠标选择密码字段!PHP网站问题
- postgresql - DBeaver + Postgres:调试功能打印到输出/控制台
- python - 调用 PutObject 操作 s3 boto 时的 BadDigest