React Native结合NativeBase组件重渲染自动滚顶问题的解决方法

我之前开发React Native + NativeBase项目时，也碰到过一模一样的问题——更新组件状态触发重渲染后，List会莫名其妙滚回顶部，体验特别差。这里有几个亲测有效的解决方案，你可以试试：

方案一：给List添加固定稳定的key #

React在重渲染组件时，会通过key来判断组件是否需要重新挂载。如果List没有固定的key，每次state更新可能会导致List被重新创建，自然就丢失了滚动位置。

只需要给你的List组件加一个固定的key值就行，比如：

<Content>
  <List key="profile-settings-list"> {/* 添加固定key */}
    <ListItem>
      <Left style={{ flex: 0 }}>
        <Icon name="user" type="SimpleLineIcons"></Icon>
      </Left>
      <Body>
        <Text> Profile </Text>
      </Body>
      <Right>
        <Switch value={this.state.profile} onValueChange={(val) => this.setState({profile: val})} />
      </Right>
    </ListItem>
    {/* 其他列表项 */}
  </List>
</Content>

这个方法最简单，大部分情况下都能解决问题。

方案二：手动保存并恢复滚动位置 #

如果方案一不生效，你可以手动记录滚动位置，在组件更新后恢复回去。NativeBase的List本质是封装了ScrollView，所以可以利用ScrollView的相关API：

1. 首先在组件的state里添加一个变量用来保存滚动位置：

state = {
  profile: false,
  scrollPosition: 0 // 保存滚动的Y轴位置
};

2. 给List添加ref和滚动监听，记录滚动位置：

// 创建ref
listRef = React.createRef();

// 渲染部分
<Content>
  <List
    ref={this.listRef}
    onScroll={(e) => {
      this.setState({ scrollPosition: e.nativeEvent.contentOffset.y });
    }}
    scrollEventThrottle={16} // 确保滚动事件触发频率足够
  >
    {/* 你的列表项 */}
  </List>
</Content>

3. 在组件更新后，恢复滚动位置：

componentDidUpdate(prevProps, prevState) {
  // 只有当profile状态变化时，才恢复滚动位置
  if (prevState.profile !== this.state.profile) {
    this.listRef.current?.scrollTo({
      y: this.state.scrollPosition,
      animated: false // 无动画恢复，更自然
    });
  }
}

方案三：检查ListItem的key是否稳定 #

虽然你是更新Switch的状态，但如果ListItem的key使用了不稳定的值（比如数组index），也可能导致组件重渲染异常。确保每个ListItem的key是唯一且固定的，比如用数据项的唯一ID：

<ListItem key={item.id}> {/* 用数据的唯一ID做key，不要用index */}
  {/* 列表项内容 */}
</ListItem>

优先试试方案一，操作最简单，通常能直接解决问题。如果还是不行，再用方案二手动控制滚动位置。

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