如何在React Native中将FlatList转为自定义导航栏？

完全可以用FlatList打造符合需求的自定义导航栏，下面针对你的核心需求给出具体实现方案：

1. 将FlatList设置为导航容器 #

要把FlatList变成可交互的导航容器，核心是让每个列表项支持点击切换选中状态，同时保持选中项的高亮样式。你只需要把原代码中列表项的View替换为Pressable，并添加点击事件来更新当前选中索引：

关键修改点： #

• 将列表项包装为Pressable组件，绑定onPress事件触发索引更新
• 保留原有的高亮样式，确保当前选中项视觉上区分于其他项

2. 根据索引值切换屏幕 #

通过维护当前选中索引，渲染对应索引的屏幕组件即可。先为每个导航项创建对应的屏幕组件，再通过索引匹配渲染：

完整修改后的代码 #

import { StyleSheet, Text, View, FlatList, Pressable } from 'react-native'
import React, { useState, useRef } from 'react'

// 定义每个导航项对应的屏幕组件
const ExploreScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text style={{ fontSize: 24 }}>Explore 页面</Text>
  </View>
)
const TrendingScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text style={{ fontSize: 24 }}>Trending 页面</Text>
  </View>
)
const PostScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text style={{ fontSize: 24 }}>Post 页面</Text>
  </View>
)
const MessagesScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text style={{ fontSize: 24 }}>Messages 页面</Text>
  </View>
)
const MarketplaceScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text style={{ fontSize: 24 }}>Marketplace 页面</Text>
  </View>
)

const allData = [
  { name: 'Explore', id: '1' },
  { name: 'Trending', id: '2' },
  { name: 'Post', id: '3' },
  { name: 'Messages', id: '4' },
  { name: 'Marketplace', id: '5' }
]

// 建立导航项与屏幕组件的对应关系
const screenComponents = [
  <ExploreScreen />,
  <TrendingScreen />,
  <PostScreen />,
  <MessagesScreen />,
  <MarketplaceScreen />
]

const spacing = 10;
const _colors = {
  active: '#eb4034',
  inactive: '#000000',
}

export default function CustomNavigation() {
  const reff = useRef<FlatList>(null)
  const [index, setIndex] = useState(0)

  const moveLeft = () => {
    if (index === allData.length - 1) return;
    setIndex(index + 1)
  }
  const moveRight = () => {
    if (index === 0) return;
    setIndex(index - 1)
  }

  React.useEffect(() => {
    reff.current?.scrollToIndex({
      index,
      animated: true
    })
  }, [index])

  return (
    <View style={{ flex: 1, backgroundColor: '#000000' }}>
      {/* 自定义导航栏 - FlatList */}
      <FlatList
        ref={reff}
        initialScrollIndex={index}
        keyExtractor={(item) => item.id}
        data={allData}
        renderItem={({ item, index: findex }) => {
          return (
            {/* 将列表项改为可点击的Pressable */}
            <Pressable
              onPress={() => setIndex(findex)}
              style={{
                backgroundColor: findex === index ? _colors.active : _colors.inactive,
                borderWidth: 2,
                borderColor: "#fff",
                borderRadius: 5,
                margin: spacing,
                padding: 5
              }}
            >
              <Text style={[styles.items, { color: '#fff' }]}>{item.name}</Text>
            </Pressable>
          )
        }}
        horizontal
        showsHorizontalScrollIndicator={false}
        scrollEnabled={false}
      />

      {/* 导航控制按钮 */}
      <View style={styles.containerButton}>
        <Pressable style={styles.buttonstyle} onPress={moveLeft}>
          <Text style={{ fontSize: 20, marginLeft: spacing, marginRight: spacing, color: '#fff' }}>→</Text>
        </Pressable>
        <Pressable style={styles.buttonstyle} onPress={moveRight}>
          <Text style={{ fontSize: 20, marginLeft: spacing, marginRight: spacing, color: '#fff' }}>←</Text>
        </Pressable>
      </View>

      {/* 根据当前索引渲染对应屏幕 */}
      <View style={{ flex: 1, backgroundColor: '#fff' }}>
        {screenComponents[index]}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  containerButton: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginVertical: spacing
  },
  items: {
    padding: 2,
    fontSize: 30,
  },
  buttonstyle: {
    borderWidth: 2,
    borderColor: '#fff',
    backgroundColor: _colors.active,
    margin: spacing,
    borderRadius: 10,
    paddingVertical: 5
  }
})

核心逻辑说明： #

• 用useState维护当前选中的导航索引，点击FlatList项或左右按钮时更新索引
• 通过useEffect监听索引变化，调用scrollToIndex让FlatList自动滚动到选中项位置
• 建立screenComponents数组，通过索引直接匹配并渲染对应的屏幕组件
• 所有导航项使用Pressable实现点击交互，同时保留高亮样式区分选中状态

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