React Native中ScrollView内Button及ListView末尾按钮定位问题

我来帮你搞定这个按钮定位的问题！目前你的添加按钮是用绝对定位固定在ScrollView的右下角，不管列表里有多少笔记，它都不会跟着最后一条内容移动。要实现按钮在新增笔记下方显示的效果，我们只需要调整按钮的布局逻辑，让它成为列表的一部分即可。

修改思路&步骤： #

1. 调整ScrollView内部结构：把addButton从绝对定位的脱离状态，改成和笔记列表同级的元素，放在{notes}的后面，让它自然跟随在最后一条笔记的下方。
2. 重置按钮样式：去掉按钮的绝对定位属性，通过布局属性让它保持你想要的右下角样式，同时融入列表的正常流中。
3. 微调容器样式：保留ScrollView的底部留白，避免内容被底部的输入框遮挡。

修改后的Main.js关键代码： #

首先是render方法里的ScrollView部分：

<ScrollView style={styles.scrollContainer}>
  <View style={styles.listWrapper}>
    {notes}
    <TouchableOpacity onPress={this.addNote.bind(this)} style={styles.addButton}>
      <Text style={styles.addButtonText}>+</Text>
    </TouchableOpacity>
  </View>
</ScrollView>

然后是对应的样式修改：

const styles = StyleSheet.create({
  // 保留原有其他样式
  scrollContainer: {
    flex: 1,
    marginBottom: 100, // 依然保留，避免内容被底部输入框遮挡
    paddingHorizontal: 10, // 可选，给内容增加左右边距提升美观度
  },
  listWrapper: {
    width: '100%',
  },
  addButton: {
    // 移除原有的绝对定位相关属性：position: 'absolute', right: 0, bottom: 0, zIndex: 11
    backgroundColor: '#1A237E',
    width: 70,
    height: 68,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 8,
    alignSelf: 'flex-end', // 让按钮靠右对齐
    marginTop: 15, // 和最后一条笔记拉开一点间距
    marginBottom: 10,
  },
  // 保留原有其他样式
});

效果说明： #

原来的position: 'absolute'让按钮脱离了正常布局流，固定在了ScrollView的角落，和列表内容没有关联。现在把按钮放在listWrapper里作为笔记列表的后续元素，它会随着列表长度的变化自动移动到最后一条笔记的下方——当你新增笔记时，列表变长，按钮也会跟着被推到新的最后一项下方，完全符合你的需求。

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