对于 React Native，Row 中的 Flexbox 内容出现问题

Question

我在使用 React Native 中的项目的 FlexBox 时遇到一些问题我希望 table 使用具有以下外观的行：

（对不起，我的绘画技巧很差，但所有文本名称和数字都应垂直居中和水平居中）

目前的样子：

现在的问题是，如您所见，图像脱离了 Card Look，而且从侧面看也不完整。

还有其他队的数据，图片更大或者名字更大所以图片更靠左: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。

这最后一部分只是想知道。

有什么想法吗？

Answer 1

给你 Image resizeMode 的 "contain" 或 "cover"

       <Image
              resizeMode="contain"
              style={{ flex: 1 }}
              source={{ uri: 'https://ezgif.com/images/insert-image.png' }}
       />

工作示例：Expo Snack

示例输出：

示例应用源代码：

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

import { Card } from 'react-native-paper';

export default TablaItem = (props) => {
  return (
    <View style={{ flex: 1, backgroundColor: '#212121' }}>
      <View style={styles.card}>
        <View>
          <View style={styles.imageCircle}>
            <Image
              resizeMode="cover"
              style={{ flex: 1 }}
              source={{ uri: 'https://ezgif.com/images/insert-image.png' }}
            />
          </View>
        </View>
        <View style={{ marginLeft: 10, flex: 2 }}>
          <Text style={styles.text}>{'Alianza Alianza'}</Text>
        </View>
        <View
          style={{
            flexDirection: 'row',
            flex: 7,
            justifyContent: 'space-evenly',
          }}>
          <View>
            <Text style={styles.text}>{10}</Text>
          </View>
          <View>
            <Text style={styles.text}>{6}</Text>
          </View>
          <View>
            <Text style={styles.text}>{4}</Text>
          </View>
          <View>
            <Text style={styles.text}>{0}</Text>
          </View>
          <View>
            <Text style={styles.text}>{15}</Text>
          </View>
          <View>
            <Text style={styles.text}>{9}</Text>
          </View>
          <View>
            <Text style={styles.text}>{20}</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  imageCircle: {
    width: 50,
    height: 50,
    backgroundColor: 'white',
    borderRadius: 25,
    padding: 8,
    borderWidth: 2,
    borderColor: 'rgba(21,21,21,0.2)',
    justifyContent: 'center',
    alignContent: 'center',
  },
  card: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 10,
    margin: 10,
    paddingHorizontal: 5,
    padding: 2,
    marginTop: 30,
  },
  text: {
    fontSize: 14,
    fontWeight: '600',
  },
});

对于 React Native，Row 中的 Flexbox 内容出现问题

Issue with Flexbox content in Row, for React Native

css

flexbox

react-native

react-native-flatlist