Как настроить карту так, чтобы все карты были одинаковой ширины, независимо от того, как долго заголовок mov ie находится в React Native? - PullRequest
Новая
       15

Как настроить карту так, чтобы все карты были одинаковой ширины, независимо от того, как долго заголовок mov ie находится в React Native?

0 голосов
/ 08 мая 2020

Я использую React Native и создаю приложение для фильмов. Просто возник вопрос о том, как сделать так, чтобы все карты были одинаковой ширины, независимо от того, как долго расширяется заголовок mov ie. Я пробовал добавить атрибут overflow: "hidden", но он ничего не делает. Я покажу фото вопроса. Если вы посмотрите на секцию mov ie с самым высоким рейтингом, название фильма в испанском sh очень длинное по сравнению с другими названиями, и эта карта расширяется еще дальше. Заранее спасибо!

enter image description here

Вот мой код 

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;

1 Ответ

1 голос
/ 08 мая 2020
  1. Используйте FlexBox, With 1 и столбец flexDirection. или определите ширину вашей карты
  2. Перенести текст с видом и текстом стиля в flexGrow: 1 это перенесет текст на следующую строку.
...