生成一段代码，设计一个应用，包括2个界面，用片段实现。用列表显示简略信息用多种组件显示详细信息 点击简略信息条目时进入详细信息显示界面，并可从详细信息界面返回简略信息界面。

以下是生成的代码，实现一个包含两个界面的应用，第一个界面为简略信息列表，第二个界面为详细信息显示：

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

const DATA = [
  {
    id: '1',
    title: 'Item 1',
    description: 'This is item 1'
  },
  {
    id: '2',
    title: 'Item 2',
    description: 'This is item 2'
  },
  {
    id: '3',
    title: 'Item 3',
    description: 'This is item 3'
  }
];

const Item = ({ item, onPress }) => (
  <TouchableOpacity onPress={onPress} style={styles.item}>
    <Text style={styles.title}>{item.title}</Text>
  </TouchableOpacity>
);

const App = () => {
  const [selectedId, setSelectedId] = useState(null);

  const renderItem = ({ item }) => {
    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';

    return (
      <Item
        item={item}
        onPress={() => setSelectedId(item.id)}
        style={{ backgroundColor }}
      />
    );
  };

  const renderDetail = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.description}>{item.description}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Simple Info</Text>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        extraData={selectedId}
      />
      {selectedId && (
        <View>
          <Text style={styles.header}>Detailed Info</Text>
          <FlatList
            data={DATA.filter(item => item.id === selectedId)}
            renderItem={renderDetail}
            keyExtractor={item => item.id}
          />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  header: {
    fontSize: 22,
    fontWeight: 'bold',
    marginTop: 20,
    marginBottom: 10
  },
  item: {
    flex: 1,
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold'
  },
  description: {
    fontSize: 16,
    fontStyle: 'italic'
  }
});

export default App;

这段代码实现了一个简略信息列表和一个详细信息显示界面之间的切换。在简略信息界面中，使用 FlatList 组件显示简略信息条目，点击条目时将其 id 存储到 selectedId 变量中，在详细信息界面通过 filter 方法筛选出 id 与 selectedId 相同的信息显示。点击返回按钮时，清空 selectedId 变量以返回简略界面。