如何配置卡片，让所有卡片的宽度都一样，不管电影的标题在 React Native 中有多红？答案

【问题标题】：How to configure card so that all cards are the same width, no matter how hong the title of the movie is in React Native?如何配置卡片，让所有卡片的宽度都一样，不管电影的标题在 React Native 中有多红？
【发布时间】：2020-05-08 20:27:18
【问题描述】：

我正在使用 react native 并且正在制作电影应用程序。只是有一个关于如何制作的问题，以便所有卡片的宽度相同，无论电影的标题扩展多长时间。我已经尝试添加溢出：“隐藏”属性，但这并没有做任何事情。我将展示该问题的图片。如果您查看评分最高的电影部分，西班牙电影的片名与其他片名相比非常长，这张卡扩展得更远。提前致谢！

这是我的代码

import React, { useState , useEffect} from "react";
import { View, Text, StyleSheet , FlatList, TouchableOpacity, Image} from "react-native";
import { Card, CardItem, Body } from 'native-base';
import axios from "axios";
import MovieItem from "./MovieItem";
import globalStyles from "../styles/globalStyles";

const TopRatedMovies = (props) => {

    const [topRatedMovies, setTopRatedMovies] = useState([]);
     useEffect(()=> {
        const fetchData = async () => {
            const response = await axios.get(`https://api.themoviedb.org/3/movie/top_rated?api_key=${props.api_key}`);
            setTopRatedMovies(response.data.results);
            console.log("LATEST RESULTSS",response.data.results)
        }

        fetchData();

    }, [])


    return(
        <View style={styles.screen}>
            <Text style={globalStyles.sectionHeaderFont}>Top Rated MOVIE</Text>
            <FlatList data={topRatedMovies} horizontal renderItem={({item})=> {
                return(
                    <View>
                    <TouchableOpacity onPress={()=> props.navigation.navigate("MovieItem", {item})}>
                        <Card style={{flexDirection:"row"}}>
                            <Image source={{uri:`https://image.tmdb.org/t/p/w1280/${item.poster_path}`}} style={{height: 100, width: 100}}/>
                        <View style={{padding: 10}}>
                            <MovieItem item={item}/>
                            <Text>{`Date of release: ${item.release_date}`}</Text>
                        </View>
                        </Card>
                    </TouchableOpacity>
                    </View>
                )
            }}/>
        </View>
    )
}


const styles= StyleSheet.create({
    screen: {
        flex: 2/8,
        justifyContent:"center",
        alignItems:"flex-start"
    }
})

export default TopRatedMovies;

【问题讨论】：

你不使用引导程序？

标签： javascript css reactjs react-native user-interface

【解决方案1】：

使用 FlexBox，带有 1 和 flexDirection 列。或定义卡片的宽度
将带有视图和样式文本的文本换行到 flexGrow:1 这会将文本换行到下一行。

【讨论】：