Блог

Я сделал этот код (живу в Expo.io ) чтобы отобразить категории данных JSON в виде заголовка и подразделов в виде списка, он использует .map() для извлечения данных из массива.

 import React, { useState } from 'react';
import { Text, View, StyleSheet, Button, FlatList } from 'react-native';
export default class J extends React.Component {
constructor() {
super();
this.state = {
  id: '1',
  name: 'Breakfast',
  category: [
    {
      id: '1',
      name: 'Burger',
      items: [
        { id: '1', name: 'Vegi' },
        { id: '2', name: 'Turkey' },
      ],
    },
    {
      id: '1',
      name: 'Egg',
      items: [
        { id: '1', name: 'Omelete' },
        { id: '2', name: 'Scrambled' },
      ],
    },
  ],
};
}
  render() {
return (
  <View>
    {this.state.category.map((item) => (
      <Text>
        {item.name}
        {item.items.map((sub) => (
          <Text> {sub.name} </Text>
        ))}
      </Text>
    ))}
  </View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
width: '100%',
borderWidth: 1,
},
});
 

он работает нормально, но он показывает подразделы рядом с основными категориями, и я хочу, чтобы это было показано следующим образом:

 Burger 
   Vegi  
   Turkey 
Egg 
   Omelete  
   Scrambled 
 

Вы должны отделить каждый <Text/> из них внутри <View/> , как это:

   render() {
    return (
      <View style={styles.container}>
        {this.state.category.map((item) => (
          <View>
            <Text>{item.name}</Text>
            {item.items.map((sub) => (
              <Text style={styles.subItem}>{sub.name}</Text>
            ))}
          </View>
        ))}
      </View>
    );
  }
 

Вы можете добавить поле для подпункта в стилях:

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    width: '100%',
    borderWidth: 1,
  },
  subItem: {
    marginLeft: 5,
  },
});
 

Попробуйте этот способ

 <View>
        {this.state.category.map((item) => (
          <Text>
            {item.name}
          </Text>
            {item.items.map((sub) => (
              <Text style={{marginLeft:30}}>{sub.name}</Text>
            ))}
        ))}
</View>