我是编程新手,过去一周我一直在解决此问题,并且无法通过其他任何方式解决它,请帮忙。
我的本机应用程序存在样式/布局问题。我有一个可触摸的不透明性,并且在其中要有两个视图(一个视图将包含图像,另一个视图将是文本框)。到目前为止,我只有两个具有不同背景颜色的空视图,以便能够可视化布局。目前,它仅显示容器的“可触摸的不透明度”视图(即黄色背景)。我已经尝试过伸缩,对齐项目,证明内容合理性以及所有这些的组合,但是没有任何效果。
有人知道该怎么做吗?
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'
},
}
答案 0 :(得分:0)
您的视图中存在拼写错误,应该是“样式”而不是“样式” 像这样
<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',
}
});