react-native - 需要创建一个显示数组列表的设计

Question

我想创建一个下面的设计，在设计中，导演详细信息是我想要显示的数组列表，例如可以有 10 个导演或 15 个导演，请告诉我如何创建这个，因为我是新人反应原生。

标签： react-native

Answer 1

最终输出：

没什么好解释的，只是一点点 CSS 样式。

还有一种，我不知道快照中使用的字体，所以我使用的是默认字体。

稍后根据您的 UI 更改它。

这是完整的代码：

export default function App() {
  const [persons, setPersons] = useState(personData);

  const renderInfoCard = (data) => {
    return (
      <View style={styles.container}>
        <Text style={styles.heading}>Director/Partner Details</Text>
        <FlatList
          style={{
            backgroundColor: '#F7F9FA',
            flex: 1,
            margin: 2,
            borderRadius: 3,
          }}
          data={data}
          renderItem={({ item }) => {
            return (
              <View style={{ flexDirection: 'row', flex: 1, padding: 5 }}>
                <View style={{ flex: 1 }}>
                  <Text style={{ color: 'grey' }}>{item.post}</Text>
                </View>
                <View style={{ flex: 1 }}>
                  <Text style={{ fontWeight: '500' }}>{item.name}</Text>
                </View>
              </View>
            );
          }}
        />
      </View>
    );
  };
  return <SafeAreaView>{renderInfoCard(persons)}</SafeAreaView>;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'start',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'white',
    padding: 8,
  },
  heading: {
    fontSize: 15,

    fontWeight: '500',
    textAlign: 'start',
    marginLeft: 15,
    marginBottom: 5,
    marginTop: 10,
  },
});

const personData = [
  {
    id: 1,
    post: 'Director 1',
    name: 'John',
  },
  {
    id: 2,
    post: 'Director 2',
    name: 'Bruce',
  },
  {
    id: 3,
    post: 'Director 3',
    name: 'Clarke',
  },
  {
    id: 4,
    post: 'Director 4',
    name: 'Peter',
  },
  {
    id: 5,
    post: 'Director 5',
    name: 'Tony',
  },
];

您可以在此处使用工作示例：Expo Snack