如何在 ScrollView 中保持位置？反应原生答案

【问题标题】：How to keep position in ScrollView? React Native如何在 ScrollView 中保持位置？反应原生
【发布时间】：2021-11-06 18:19:27
【问题描述】：

我想用 6 个 TouchableOpacity 元素制作水平 ScrollView； onPress 他们会改变一些redux状态，然后，他们自己的风格，如何强制重新渲染列表保持位置？现在，如果我在滚动后按下它会回到开始

我希望这看起来像在 Play Market 中选择类别，但没有居中，它只需要保持位置

here how it looks

    <ScrollView 
style={{ height: 50, width: '100%' }} 
contentContainerStyle={{ alignItems: 'center' }} 
horizontal={true} 
showsHorizontalScrollIndicator={false}
>
  <TouchableOpacity
    style={categoryNumber === 0 ? styles.BtnActive : styles.Btn}
    onPress={() => dispatch(setCategoryNumber(0))}>
    <Text style={categoryNumber === 0 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 1</Text>
  </TouchableOpacity>
  <TouchableOpacity
    style={categoryNumber === 1 ? styles.BtnActive : styles.Btn}
    onPress={() => dispatch(setCategoryNumber(1))}>
    <Text style={categoryNumber === 1 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 2</Text>
  </TouchableOpacity>
  <TouchableOpacity
    style={categoryNumber === 2 ? styles.BtnActive : styles.Btn}
    onPress={() => dispatch(setCategoryNumber(2))}>
    <Text style={categoryNumber === 2 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 3</Text>
  </TouchableOpacity>
  <TouchableOpacity
    style={categoryNumber === 3 ? styles.BtnActive : styles.Btn}
    onPress={() => dispatch(setCategoryNumber(3))}>
    <Text style={categoryNumber === 3 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 4</Text>
  </TouchableOpacity>
    <TouchableOpacity
    style={categoryNumber === 4 ? styles.BtnActive : styles.Btn}
    onPress={() => {dispatch(setCategoryNumber(4))}}>
    <Text style={categoryNumber === 4 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 5</Text>
  </TouchableOpacity>
    <TouchableOpacity
    style={categoryNumber === 5 ? styles.BtnActive : styles.Btn}
    onPress={() => {dispatch(setCategoryNumber(5))}}>
    <Text style={categoryNumber === 5 ? styles.BtnTextActive : styles.BtnText}>ITEM_NAME 6</Text>
  </TouchableOpacity>
</ScrollView>


const styles = StyleSheet.create({
  Btn: {
    height: 40,
    backgroundColor: '#F1F5FE',
    paddingHorizontal: 10,
    justifyContent: 'center',
    borderRadius: 12,
    marginHorizontal: 4
  },
  BtnText: {
    color: '#000'
  },
  BtnActive: {
    height: 40,
    backgroundColor: '#336FEE',
    paddingHorizontal: 10,
    justifyContent: 'center',
    borderRadius: 12,
    marginHorizontal: 4
  },
  BtnTextActive: {
    color: '#fff'
  }
})

【问题讨论】：

标签： javascript react-native mobile scrollview

【解决方案1】：

为 ScrollView 的组件添加唯一的keys

Here is why you need keys

例子：

  <TouchableOpacity
     key={'some-unique-id'}
     style={categoryNumber === 0 ? styles.BtnActive : styles.Btn}
     onPress={() => dispatch(setCategoryNumber(0))}>
    <Text style={categoryNumber === 0 ? styles.BtnTextActive : styles.BtnText}>
     ITEM_NAME 1
    </Text>
  </TouchableOpacity>

提示：尝试使用循环而不是在 ScrollView 中硬写东西

【讨论】：

我添加了 id，它没有帮助，同样的行为，没有任何改变