Блог

Ну, я хотел бы использовать один компонент для отображения разных типов данных, поскольку я использую typescript, мне нужно передать тип данных, которые будет использовать мой flatlist, на данный момент у меня есть только музыка и плейлист. Есть ли способ передать эти типы по отцу? Потому что я хотел бы повторно использовать этот компонент

Пользовательский тип

 type userType = {
    id: string
    name: string
    email: string
    password: string
}
  

Тип списка воспроизведения

 type playlistType = {
    id: string
    name: string
    user: userType
}
  

Тип музыки

 type musicType = {
    id: string
    name: string
    artist: string
    album: string
    releaseyear: Date
    genre: string
    duration: string
    user: userType
}
  

Компонент

 const scrollableView: React.FC<scrollableViewProps> = (props /* There is nothing coming to props yet */) => {
    return (
        <FlatList <Type of data that cames>
            /* The settings for flatlist */
        />
    )
}

  

Родительский компонент, который будет вызывать список дважды

 const Dashboard: React.FC<DashboardScreenProps> = ({navigation}) => {
    let {loggedUser} = useContext(UserContext)
    let [fetchedData, setFetchedData] = useState<fetchedDataType>({
        playlists: [],
        musics: []
    })

    /* Some code here thats not important */

    return (
        <View style={Style.container}>
            <View>
                <Text>Playlists</Text>
                <ScrollableView /> //The component I would like to pass playlist type
            </View>

            <View>
                <Text>Musics</Text>
                <ScrollableView /> //The same component I would like to pass music type
            </View>
        </View>
    )
}
  

Вы можете использовать тип объединения. | Оператор в основном является OR для типов.

 type scrollableViewProps = {
  data: musicType | playlistType
}