React Native中是否存在Tree组件？需求该组件时如何处理？

Hey there! Great question—this is a common pain point for React Native developers since there's no official built-in Tree component in the core library. But don't worry, you've got two solid paths to solve this: using community packages or building a custom one yourself. Let's break it down:

方案一：使用第三方社区库 #

The React Native community has built some reliable packages that handle tree view needs out of the box. Here are two popular options:

• react-native-tree-view: A lightweight, easy-to-use tree component that supports expand/collapse functionality and custom node rendering. After installing it via npm/yarn, you can use it like this:

import TreeView from 'react-native-tree-view';

const treeData = [
  {
    label: 'Parent Node 1',
    children: [
      { label: 'Child Node 1-1' },
      { label: 'Child Node 1-2' }
    ]
  },
  { label: 'Parent Node 2' }
];

// Inside your component
<TreeView
  data={treeData}
  renderNode={(node) => <Text style={{ padding: 8 }}>{node.label}</Text>}
/>

• react-native-expandable-section-list: Built on top of React Native's SectionList, this is ideal for shallower tree structures. It's optimized for performance and works great if you need grouped expandable sections.

方案二：手动实现自定义树形组件 #

If third-party packages don't fit your custom styling or functionality needs, building your own tree component is totally doable—recursion is the key here. Here's a simple working example:

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useState } from 'react';

// Recursive tree node component
const TreeNode = ({ node }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const hasChildren = node.children && node.children.length > 0;

  return (
    <View>
      {/* Node header with expand/collapse toggle */}
      <TouchableOpacity 
        onPress={() => hasChildren && setIsExpanded(!isExpanded)}
        style={styles.nodeHeader}
      >
        <Text>
          {hasChildren ? (isExpanded ? '▼ ' : '▶ ') : ''}
          {node.label}
        </Text>
      </TouchableOpacity>
      {/* Render child nodes recursively when expanded */}
      {isExpanded && hasChildren && (
        <View style={styles.childContainer}>
          {node.children.map((child, idx) => (
            <TreeNode key={idx} node={child} />
          ))}
        </View>
      )}
    </View>
  );
};

// Wrapper component for the entire tree
const CustomTreeView = ({ data }) => {
  return (
    <View style={styles.treeContainer}>
      {data.map((node, idx) => (
        <TreeNode key={idx} node={node} />
      ))}
    </View>
  );
};

// Basic styles (customize as needed)
const styles = StyleSheet.create({
  treeContainer: {
    margin: 10,
  },
  nodeHeader: {
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#e0e0e0',
  },
  childContainer: {
    paddingLeft: 20,
  },
});

// Usage example
// const treeData = [/* your tree structure here */];
// <CustomTreeView data={treeData} />

This custom setup gives you full control over styling, animations, and additional features (like node selection, checkbox support, etc.). For large datasets, remember to optimize with React.memo for the TreeNode component or even integrate FlatList for virtualized rendering to keep performance smooth.

内容的提问来源于stack exchange，提问作者user9130545