Блог

Я хочу создать дизайн ниже, в дизайне, сведения о директоре — это список массива, который я хочу отобразить, например, может быть 10 директоров или 15 директоров, пожалуйста, дайте мне знать, как я могу это создать, поскольку я новичок в react-native.

Конечный результат:

Объяснять особо нечего, просто немного стиля CSS.

Еще один, я не знаю шрифты, используемые в моментальном снимке, поэтому я использую шрифты по умолчанию.

Измените его позже в соответствии с вашим пользовательским интерфейсом.

Вот полный код:

 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