React Native：这个组件是怎么调用的？答案

【问题标题】：React Native: How does this Component call?React Native：这个组件是怎么调用的？
【发布时间】：2021-01-30 18:33:20
【问题描述】：

有人可以帮我做这个组件吗，我想做这样的，但不知道这个白框是怎么叫的？有人可以告诉我吗？如果我们按下那个黄色的Touchable Opacity，它会显示整个文本，如果我们再次按下它会变小！在此先感谢，我是 RN 的新手

【问题讨论】：

想知道如何显示卡片吗？
我想知道这张卡是怎么调用的，并在 RN 的文档中找到它

标签： javascript reactjs react-native react-redux

【解决方案1】：

您可以使用一点 CSS 轻松创建该卡片。

下面是示例应用程序，它向您展示了如何实现这一目标。

工作示例：Expo Snack

import React, { useState, useEffect } from 'react';
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  Image,
  TouchableOpacity,
} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import Constants from 'expo-constants';
import { newsFeed } from './news';
export default function App() {
  const [news, setNews] = useState(newsFeed);

  const showFull = (index) => {
    const temp = [...news];
    temp[index].toggle = !temp[index].toggle;
    setNews(temp);
  };
  return (
    <View style={styles.container}>
       <FlatList
        data={news}
        renderItem={({ item, index }) => (
          <View style={styles.card}>
            <Text style={styles.title}>{item.title}</Text>
            <Text style={styles.paragraph}>
              {item.toggle ? item.desc : `${item.desc.substr(0, 100)}...`}
            </Text>
            {item.toggle && (
              <Image source={{ uri: item.img }} style={styles.img} />
            )}
            <View style={styles.bottomBar}>
              <Text style={styles.date}>4/02/2021</Text>
              <TouchableOpacity onPress={() => showFull(index)}>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <Text style={styles.moreBtn}>
                    {!item.toggle ? 'More' : 'Less'}
                  </Text>
                  <AntDesign
                    name={item.toggle ? 'up' : 'down'}
                    size={12}
                    color="orange"
                  />
                </View>
              </TouchableOpacity>
            </View>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  bottomBar: {
    marginVertical: 5,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  card: {
    padding: 10,
    backgroundColor: 'white',
    marginVertical: 5,
    borderRadius: 10,
  },
  title: {
    marginVertical: 5,

    fontSize: 18,
    fontWeight: 'bold',
  },
  img: {
    flex: 1,
    height: 100,
    borderRadius: 10,
    marginVertical: 5,
  },
  paragraph: {
    fontSize: 14,
  },
  date: {
    fontSize: 12,
    color: 'rgba(21,21,21,0.5)',
  },
  moreBtn: {
    fontSize: 12,
    color: 'orange',
    marginRight: 10,
  },
});

【讨论】：

【解决方案2】：

实际上这张卡片不是一个组件，您可以使用 css 设计它，如果您想创建一个可以重复使用的组件，那么您可以制作一个组件并根据需要重复使用它，对于这张卡片，您可以使用自己的css 或一个名为 native-base 的库，它是像 bootstrap 但它用于 react-native

您可以在此处阅读有关本机基础的更多信息 https://nativebase.io/

如果您想创建自己的卡片，请制作一个单独的文件并在其中制作一个功能卡片组件

随心所欲地调用它

import myCustomCard from './card'

并在你的 jsx 中像这样使用它

<myCustomCard />

如果你想了解更多关于如何传递 props 的信息，或者你可以在这里查看 react native 的官方文档 https://reactnative.dev/docs/getting-started

【讨论】：