反应原生布局 - 视图未显示在可触摸的不透明度内答案

【问题标题】：React native layouts - view not showing inside touchable opacity反应原生布局 - 视图未显示在可触摸的不透明度内
【发布时间】：2020-12-12 21:44:28
【问题描述】：

我是编程新手，过去一周我一直在处理这个问题，但无法通过任何其他方式解决它，请帮忙。

我的 react native 应用程序存在样式/布局问题。我有一个可触摸的不透明度，在它里面我想要两个视图（一个包含图像，一个是文本框）。到目前为止，我只有两个具有不同背景颜色的空视图，以便能够可视化布局。目前，它只显示容器“可触摸不透明度”视图（即黄色背景）。我尝试了 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'
    },
}

【问题讨论】：

标签： javascript react-native layout styles

【解决方案1】：

您的视图中有拼写错误，应该是“样式”而不是“样式” 像这样

<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',
    }
});

【讨论】：