【发布时间】：2021-04-18 17:30:02
【问题描述】：
我在使用 React Native 中的项目的 FlexBox 时遇到了一些问题，我希望有一个使用具有这种外观的行的表格：
（对不起，我的绘画技巧很差，但所有文本名称和数字都应该垂直居中和水平居中）
目前的样子：
现在的问题是，您可以看到图像脱离了卡片外观，而且从侧面看也不完整。
还有其他团队数据，图像更大或名称更大，因此图像更靠左：S
例子：
最后是我创建行的项目代码：
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import Card from '../UI/Card';
import Colors from '../../constants/Colors';
const TablaItem = props => {
return (
<Card style={styles.product}>
<View style={styles.touchable}>
<View style={styles.container}>
<View style={styles.flexItem}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={{ uri: props.image}} />
</View>
</View>
<View style={styles.flexItem}>
<Text>{props.name}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.games}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.win}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.draw}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.loose}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.infavor}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.against}</Text>
</View>
<View style={styles.flexItem}>
<Text>{props.points}</Text>
</View>
</View>
</View>
</Card>
);
};
const styles = StyleSheet.create({
product: {
height: 50,
margin: 20,
justifyContent: 'center',
alignItems: 'center'
},
container: {
flex: 5,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
flexWrap: 'nowrap'
},
flexItem: {
flexGrow: 0,
flexShrink: 1,
flexBasis: 'auto',
alignSelf:'auto',
marginHorizontal: 10,
},
imageContainer: {
alignSelf: 'flex-end',
width: '200%',
height: '100%',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
marginHorizontal: 10,
},
image: {
width: '100%',
height: '100%'
},
});
export default TablaItem;
这里是我在 FlatList 中呈现这些项目的页面代码：
import React, { useState, useEffect, useCallback } from 'react';
import { FlatList, Button, ActivityIndicator, View, StyleSheet, Text } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import * as tablaActions from '../store/actions/tabla';
import Colors from '../constants/Colors';
import Tabla from '../components/tablas/TablaItem';
import Encabezado from '../components/tablas/TablaEncabecado';
const TablaScreen = props => {
const [isLoading, setIsLoading] = useState(false);
const [isRefreshing, setIsRefreshing] = useState(false);
const [error, setError] = useState();
const tabla1 = useSelector(state => state.tabla.tabla1);
const tabla2 = useSelector(state => state.tabla.tabla2);
const dispatch = useDispatch();
//Aqui se llama a Load Tabla para llamar partidos desde el API
const loadTablas = useCallback(async () => {
setError(null);
setIsRefreshing(true);
try {
await dispatch(tablaActions.fetchTabla());
} catch (err) {
setError(err.message);
}
setIsRefreshing(false);
}, [dispatch, setIsLoading, setError]);
//unsuscribe de Tablas
useEffect(() => {
const unsubscribeTablas = props.navigation.addListener('focus', loadTablas);
return () => {
unsubscribeTablas();
};
}, [loadTablas]);
//useEffect (carga inicial) de Tablas
useEffect(() => {
setIsLoading(true);
loadTablas().then(() => {
setIsLoading(false);
});
}, [dispatch, loadTablas]);
if (error) {
return <View style={styles.centered} >
<Text>Ah Ocurrido un Error {error}</Text>
<Button title='Probar de Nuevo' onPress={loadTablas} color={Colors.secondary} />
</View>
}
if (isLoading) {
return <View style={styles.centered} >
<ActivityIndicator size='large' color={Colors.secondary} />
</View>
}
//Checkeo de Partidos no Vacio.
if (!isLoading && tabla1 === 0 || tabla2 === 0) {
return <View style={styles.centered} >
<ActivityIndicator size='large' color={Colors.secondary} />
</View>
}
return(
<>
<Text style={styles.grupo}>Grupo A</Text>
<FlatList
onRefresh={loadTablas}
refreshing={isRefreshing}
data={tabla1}
keyExtractor={item => item.teamId.toString()}
renderItem={
itemData => <Tabla
image={itemData.item.logo}
name={itemData.item.teamName}
games={itemData.item.matchsPlayed}
win={itemData.item.win}
draw={itemData.item.draw}
loose={itemData.item.lose}
infavor={itemData.item.goalsFor}
against={itemData.item.goalsAgainst}
points={itemData.item.points}
/>
}
/>
<Text style={styles.grupo}>Grupo B</Text>
<FlatList
onRefresh={loadTablas}
refreshing={isRefreshing}
data={tabla2}
keyExtractor={item => item.teamId.toString()}
renderItem={
itemData => <Tabla
image={itemData.item.logo}
name={itemData.item.teamName}
games={itemData.item.matchsPlayed}
win={itemData.item.win}
draw={itemData.item.draw}
loose={itemData.item.lose}
infavor={itemData.item.goalsFor}
against={itemData.item.goalsAgainst}
points={itemData.item.points}
/>
}
/>
</>
);
};
export const screenOptions = navData => {
return {
headerTitle: 'Tabla de Clasificacion',
// headerLeft: () => (<HeaderButtons HeaderButtonComponent={HeaderButton}>
// <Item
// title='Menu'
// iconName={Platform.OS === 'android' ? 'md-menu' : 'ios-menu'}
// onPress={() => {
// navData.navigation.toggleDrawer();
// }} />
// </HeaderButtons>),
// headerRight: () => (<HeaderButtons HeaderButtonComponent={HeaderButton}>
// <Item
// title='Carretilla'
// iconName={Platform.OS === 'android' ? 'md-cart' : 'ios-cart'}
// onPress={() => {
// navData.navigation.navigate('Cart');
// }} />
// </HeaderButtons>)
}
};
const styles = StyleSheet.create({
centered: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
grupo: {
alignSelf: 'center',
fontWeight: 'bold',
fontSize: 16,
color: Colors.primary,
marginTop: 10,
}
});
export default TablaScreen;
我还想将 Flatlist 的线条呈现在另一个下方，目前看起来像这样：
并且还想在顶部添加如下内容：
这基本上是一个具有相同样式的Header，并且它将具有标题：
Equipo（将是图像和名称的长度）、Juegos、Ganados、Empates、Perdidos、Afavor、Encontra、Puntos。
这最后一部分只是想知道。
有什么想法吗？
【问题讨论】：
标签： css react-native flexbox react-native-flatlist