javascript - 反应本机布局 - 视图未显示在可触摸的不透明度内
问题描述
我是编程新手,过去一周我一直在解决这个问题,但无法以任何其他方式解决,请帮忙。
我的反应原生应用程序有样式/布局问题。我有一个可触摸的不透明度,在它里面我想要两个视图(一个包含图像,一个是文本框)。到目前为止,我只有两个具有不同背景颜色的空视图,以便能够可视化布局。目前,它只显示容器“可触摸不透明度”视图(即黄色背景)。我尝试了 flex、对齐项目、证明内容以及所有这些的组合,但没有任何效果。
有人知道怎么做这个吗?
import React from 'react'
import {StyleSheet, Text, View, TouchableOpacity, Dimensions, Image} from 'react-native'
import PropTypes from 'prop-types'
const { width, height } = Dimensions.get('screen');
// <TouchableOpacity style={styles.container} onPress={()=> {
//props.onSelectContact(props)
const WalletComponent = props => (
<TouchableOpacity style={styles.container}>
<View styles={styles.imagecontainer}>
</View>
<View styles={styles.infobox}>
</View>
</TouchableOpacity>
)
export default WalletComponent
WalletComponent.propTypes = {
businessname: PropTypes.string,
businesscity: PropTypes.string,
businessimage: PropTypes.any,
pointos: PropTypes.number,
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
height: height*0.30,
width: width*0.8,
borderTopLeftRadius: 20,
borderTopRightRadius:20,
borderBottomRightRadius:20,
borderBottomLeftRadius:20,
borderColor:'red',
backgroundColor:'yellow',
borderWidth:2,
},
imagecontainer: {
flex: 5,
borderColor:'red',
backgroundColor:'blue',
borderWidth:2,
},
infobox:{
flex: 2,
borderBottomRightRadius:20,
borderBottomLeftRadius:20,
borderColor:'red',
borderWidth:2,
backgroundColor:'green'
},
}
解决方案
您的视图中有拼写错误,应该是“样式”而不是“样式”
<View style={styles.infobox}>
</View>
如果要在所有四个角上使用相同的半径,也可以使用borderRadius。这是您的更改代码
import React from 'react'
import {StyleSheet, Text, View, TouchableOpacity, Dimensions, Image} from 'react-native'
import PropTypes from 'prop-types'
const { width, height } = Dimensions.get('screen');
const WalletComponent = props => (
<TouchableOpacity style={styles.container}>
<View style={styles.imagecontainer}>
<Text>test</Text>
</View>
<View style={styles.infobox}>
<Text>test</Text>
</View>
</TouchableOpacity>
)
export default WalletComponent
WalletComponent.propTypes = {
businessname: PropTypes.string,
businesscity: PropTypes.string,
businessimage: PropTypes.any,
pointos: PropTypes.number,
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
height: height*0.30,
width: width*0.8,
borderRadius:20,
borderColor:'red',
backgroundColor:'yellow',
borderWidth:2,
},
imagecontainer: {
flex: 5,
borderColor:'red',
backgroundColor:'blue',
borderWidth:2,
},
infobox:{
flex: 2,
borderBottomRightRadius:20,
borderBottomLeftRadius:20,
borderColor:'red',
borderWidth:2,
backgroundColor:'green',
}
});
推荐阅读
- google-apps-script - 谷歌应用程序脚本无效参数:searchPattern
- javascript - 根据子值对 Firebase 数据进行排序
- sql-server - 如何使用点几何列到 SQL Server 空间中最近的线串几何列计算“km”距离
- sql - 有没有办法在这个数据库中显示一个系列中的所有书籍?可能使用 CONCAT()
- rendering - 是否有一个简单的数学解决方案来采样磁盘区域光?(光线追踪)
- wordpress - 如何在 OpenShift 中使用 CLI 访问 wp-config.php 文件?
- javascript - 从名称列表中获取所有可能的对
- javascript - 组件 q-table 中单元格的 Quasar 条件样式
- python - 从 Python 脚本更新多行 SQL 表
- c# - 通过单击 C# 中的按钮返回更新的列表