React Native+Native Base分段视图中子组件状态与滚动位置保持问询

Hey there! I’ve faced this exact frustration with Native Base’s Segment View before—there’s nothing more annoying than losing your scroll position every time you switch tabs, right? Let’s walk through the most reliable ways to keep your child components mounted and their states intact when switching segments.

1. Hide Inactive Components with Styles (Don’t Unmount Them) #

The root issue here is that when you use conditional rendering like {activeTab === 'tab1' && <Tab1Component />}, inactive components get unmounted entirely, wiping their state. Instead, render all your child components at once and use styles to hide the ones that aren’t active.

Here’s how to do it:

import { View } from 'react-native';
import { Segment, Button } from 'native-base';

// Inside your component
const [activeTab, setActiveTab] = useState('tab1');

return (
  <>
    <Segment>
      <Button
        onPress={() => setActiveTab('tab1')}
        isActive={activeTab === 'tab1'}
      >
        Tab 1
      </Button>
      <Button
        onPress={() => setActiveTab('tab2')}
        isActive={activeTab === 'tab2'}
      >
        Tab 2
      </Button>
    </Segment>

    {/* Render both tabs, hide inactive ones */}
    <View style={{ display: activeTab === 'tab1' ? 'flex' : 'none' }}>
      <Tab1Component /> {/* Your scrollable list component */}
    </View>
    <View style={{ display: activeTab === 'tab2' ? 'flex' : 'none' }}>
      <Tab2Component /> {/* Your other component */}
    </View>
  </>
);

If you’re worried about layout shifts or unintended interactions with hidden components, you can combine opacity and pointerEvents instead:

<View 
  style={{ opacity: activeTab === 'tab1' ? 1 : 0 }}
  pointerEvents={activeTab === 'tab1' ? 'auto' : 'none'}
>
  <Tab1Component />
</View>

This keeps the component mounted (so state/scroll position stays) while making it invisible and unclickable when inactive.

2. Use Native Base’s Tabs Component (Built-in State Preservation) #

If your use case allows it, ditch the Segment component for Native Base’s Tabs—it’s designed to keep tab content mounted by default, so scroll positions and component states are preserved automatically.

Here’s a quick example:

import { Tabs, TabList, Tab, TabPanel } from 'native-base';

return (
  <Tabs>
    <TabList>
      <Tab>Tab 1</Tab>
      <Tab>Tab 2</Tab>
    </TabList>
    <TabPanel>
      <Tab1Component /> {/* Scroll position stays when switching back */}
    </TabPanel>
    <TabPanel>
      <Tab2Component />
    </TabPanel>
  </Tabs>
);

This is the most low-effort solution if you don’t strictly need the Segment UI—Native Base handles all the state preservation under the hood.

3. Manually Save and Restore Scroll Positions (Fallback Option) #

If you can’t avoid unmounting components (e.g., performance reasons with heavy tabs), you can manually save each tab’s scroll position and restore it when switching back.

For a FlatList, this looks like:

import { useState } from 'react';
import { FlatList } from 'react-native';

const [scrollPositions, setScrollPositions] = useState({
  tab1: 0,
  tab2: 0
});

// Inside Tab1Component
<FlatList
  onScroll={(e) => {
    // Save the current scroll position when scrolling
    setScrollPositions(prev => ({
      ...prev,
      tab1: e.nativeEvent.contentOffset.y
    }));
  }}
  // Restore position when the tab becomes active
  scrollToOffset={{ y: scrollPositions.tab1, animated: false }}
  // Your other FlatList props...
/>

Repeat this pattern for each tab’s list. It’s more work, but it’s a reliable fallback if the other solutions don’t fit your needs.

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