【发布时间】：2021-02-18 01:11:16
【问题描述】：
我在显示信息时遇到了一些麻烦，我认为这些信息与 Flexbox 属性有关，但无论我如何使用样式，我都无法将所有内容都放入某些组件中。
首先我有这个组件，它是一个简单的卡片组件，我从 API 传递我的数据：
<PartidoItem
localImage={logoLocal}
marcadorLocal={marcadorLocal}
time={date}
partidoId={partidoId}
estatus={estatus}
minute={elapsed}
estadio={estadio}
marcadorVisita={marcadorVisita}
visitImage={logoVisita}
onSelect={estatus !== 'NS' && estatus !== 'TBD' ? () => {
selectPartidoHandler(partidoId, tituloPartido)
}
: () => { }
}
/>
这来自这个组件：
import React from 'react';
import { View, Text, Image, StyleSheet, TouchableNativeFeedback, TouchableOpacity, Platform } from 'react-native';
import Card from '../UI/Card';
import Colors from '../../constants/Colors';
const PartidoItem = props => {
let TouchableCmp = TouchableOpacity;
if (Platform.OS === 'android' && Platform.Version >= 21) {
TouchableCmp = TouchableNativeFeedback;
}
return (
<Card style={styles.product}>
<View style={styles.touchable}>
<TouchableCmp onPress={props.onSelect} useForeground>
<View style={styles.container}>
<View style={styles.column}>
<View style={styles.imageContainer}>
<Image
resizeMode="cover"
style={styles.image}
source={{ uri: props.localImage }}
/>
</View>
</View>
<View style={styles.column}>
<Text style={styles.number}>{props.marcadorLocal}</Text>
</View>
{props.estatus === 'NS' || props.estatus === 'TBD'
? <View style={styles.column}>
<Text style={styles.date}>{props.time}</Text>
<Text style={styles.title}>{props.estadio}</Text>
</View>
: props.estatus === 'FT' ?
<View style={styles.column}>
<Text style={styles.title2}>Final</Text>
<Text style={styles.title}>{props.estadio}</Text>
</View>
:
<View style={styles.column}>
<Text style={styles.title}>Tiempo:</Text>
<Text style={styles.title}>{props.minute} '</Text>
</View>
}
<View style={styles.column}>
<Text style={styles.number}>{props.marcadorVisita}</Text>
</View>
<View style={styles.column}>
<View style={styles.imageContainer}>
<Image
resizeMode="cover"
style={styles.image}
source={{ uri: props.visitImage }}
/>
</View>
</View>
</View>
</TouchableCmp>
</View>
</Card>
);
};
const styles = StyleSheet.create({
product: {
height: 100,
margin: 20,
justifyContent: 'center',
alignItems: 'center',
},
touchable: {
borderRadius: 10,
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
column: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '20%',
},
space_between_columns: {
width: 100
},
box: {
height: 50,
width: 50
},
imageContainer: {
width: '100%',
height: '70%',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
marginHorizontal: 10,
overflow: 'hidden',
},
image: {
width: '100%',
height: '100%',
flex: 1,
},
hora: {
fontSize: 14,
color: '#888',
fontWeight: 'bold',
textAlign: 'center',
},
number: {
fontSize: 50,
marginVertical: 4,
fontWeight: 'bold',
justifyContent: 'center',
color: Colors.secondary,
},
title: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
//flexWrap: 'wrap',
flex: 2,
flexGrow: 1,
},
title2: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
color: 'red',
},
date: {
fontSize: 14,
marginVertical: 4,
textAlign: 'center',
flex: 1,
flexGrow: 1,
marginHorizontal: 2,
},
});
export default PartidoItem;
也包含这个组件：
import React from 'react';
import { View, StyleSheet } from 'react-native';
//Importacion de los colores
import Colors from "../../constants/Colors";
const Card = props => {
return (
<View style={{...styles.card, ...props.style}}>
{props.children}
</View>
);
};
const styles = StyleSheet.create({
card: {
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: Colors.background,
}
});
export default Card;
现在的问题是，当我在 Android 模拟器中看到它并且它有大字符串时，我看到了这个：
正如您所见，组件是主框中的组件，并且属性“Estadio”太大而无法完全显示
当我在我的 iOS 设备上（通过 Expo）检查时也会发生同样的情况：
有没有办法让这些信息适合该空间以便显示全名？
亲切的问候
PD：在第一次回答更改建议后，这是徽标未正确显示的结果：
【问题讨论】：
标签： react-native flexbox