React Native设置页按钮间添加分隔线问题求助

根据你的需求和现有代码，这里提供两种适配你当前写法的分隔线实现方式，都基于内联样式/你正在使用的类名语法：

方案一：利用底部边框实现（简洁高效） #

调整外层布局，通过给每个设置项容器添加底部边框作为分隔线，同时优化箭头的布局（避免绝对定位）：

<View className="w-full mt-2 flex-row items-center justify-between p-3 border-b border-gray-200">
  <TouchableOpacity onPress={() => navigation.navigate(RouteName.home)} className="flex flex-row items-center space-x-3">
    <Ionicons name='person-sharp' size={24} color="grey"></Ionicons>
    <Text>Profile</Text>
  </TouchableOpacity>
  <AntDesign name='right' size={24} color='#7A7A7A'></AntDesign>
</View>

关键调整说明： #

• 外层View添加border-b border-gray-200（灰色底部边框）作为分隔线
• 用justify-between替代绝对定位，让左侧内容和右侧箭头自动分布在容器两端，布局更稳定
• 添加p-3给项内增加内边距，让点击区域更合理

如果是最后一个设置项，只需去掉border-b border-gray-200即可避免多余的分隔线。

方案二：独立分隔线View（更灵活可控） #

如果需要对分隔线的边距、样式做更精细的调整，可以单独添加一个View作为分隔线：

<View className="w-full mt-2">
  <TouchableOpacity onPress={() => navigation.navigate(RouteName.home)} className="flex flex-row items-center justify-between p-3">
    <View className="flex flex-row items-center space-x-3">
      <Ionicons name='person-sharp' size={24} color="grey"></Ionicons>
      <Text>Profile</Text>
    </View>
    <AntDesign name='right' size={24} color='#7A7A7A'></AntDesign>
  </TouchableOpacity>
  {/* 分隔线 */}
  <View className="h-px bg-gray-200 mx-3"></View>
</View>

关键调整说明： #

• 单独的View通过h-px设置高度为1像素，bg-gray-200设置灰色背景，mx-3给左右添加边距，让分隔线和内容错开，更贴近目标效果
• 同样，最后一个项需要移除这个分隔线View

如果不用类名语法（纯内联样式），对应的代码如下：

<View style={{width: '100%', marginTop: 8}}>
  <TouchableOpacity 
    onPress={() => navigation.navigate(RouteName.home)} 
    style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 12}}
  >
    <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
      <Ionicons name='person-sharp' size={24} color="grey"></Ionicons>
      <Text>Profile</Text>
    </View>
    <AntDesign name='right' size={24} color='#7A7A7A'></AntDesign>
  </TouchableOpacity>
  {/* 分隔线 */}
  <View style={{height: 1, backgroundColor: '#e5e7eb', marginHorizontal: 12}}></View>
</View>

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