React Native如何实现iOS原生风格右侧带箭头的按钮列表

你完全没必要从零手写全部代码，有成熟的现成方案可以直接还原iOS设置App的原生质感，你要的类似MUI endIcon 配置右侧箭头的效果也能直接实现。

跨端通用方案 #

优先选react-native-elements的ListItem组件，这个组件内置了iOS原生风格的按压高亮、分割线、分组圆角逻辑，不需要自己调样式：

• 组件自带chevron属性，开启后直接在右侧渲染和iOS设置一致的箭头图标，和你要的endIcon效果完全等价
• 自动适配iOS端的边距、行高、字体规范，出来的效果和系统设置页几乎无差
• 同时支持安卓端，不需要写两套代码

基础用法示例：

import { ListItem } from '@react-native-elements/themed';
import { ScrollView } from 'react-native';

export default function SettingsPage() {
  const menuItems = [
    { title: 'General', onPress: () => {} },
    { title: 'Control Center', onPress: () => {} },
    { title: 'Display & Brightness', onPress: () => {} }
  ];

  return (
    <ScrollView>
      {menuItems.map((item, index) => (
        <ListItem
          key={index}
          onPress={item.onPress}
          bottomDivider
          chevron
        >
          <ListItem.Content>
            <ListItem.Title>{item.title}</ListItem.Title>
          </ListItem.Content>
        </ListItem>
      ))}
    </ScrollView>
  );
}

100%原生还原方案 #

如果你追求和iOS系统设置完全一致的视觉、交互细节，连动效、字体渲染都要和系统对齐，可以用封装iOS原生UITableView的组件库，这类库直接调用系统原生控件渲染列表，不需要自己写任何样式，传标题和点击回调就行。

注意：这类基于原生控件封装的库仅支持iOS端，如果你的应用需要同时适配安卓，选上面的跨端方案更合适。

轻量无重依赖方案 #

如果不想给项目加额外的组件库依赖，只用React Native内置组件加一个图标库就能快速实现：

• 用内置的Pressable做行容器，设置标准行高44，按压时切换半透明灰色背景
• 引入Ionicons的chevron-forward图标放在右侧，颜色用iOS系统标准箭头灰#C7C7CC
• 行底部加1px高的浅灰色分割线，左侧留16px边距即可，整体代码量不超过20行。

效果参考：

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