Привет, ребята, давайте попробуем создать лист действий в стиле iOS с помощью React Native.

Настройка проекта React Native.

( Перейдите к следующему разделу, если это уже сделано.. )

Пройдите по этой ссылкеhttps://reactnative.dev/docs/environment-setup#docsNavи следуйте инструкциям по созданию нового проекта React Native.

npx react-native init RNCustomActionSheet

return {
 <>
  <View>
  </View>
 <>
}

Давайте создадим папку src/actionSheetи файлindex.js

Это будет наш компонент <ActionSheet/>.

Для этого компонента потребуется массив action itemsтакой структуры:

{
id: <Unique Id>,
label: '<Label for an action item>',
onPress: () => {
        
         <On Press Callback for the action item>
}
}

Этот компонент принимает массив элементов действий и добавляет в конец объект.

{
id: '#cancel',
label: 'Cancel',
onPress: props?.onCancel
}

Компонент оформлен в соответствии с таблицей действий iOS.

Все, что нам нужно сделать сейчас, это обернуть вышеуказанный компонент внутри <Modal/> и расположить его внизу экрана.

Хорошо, давайте посмотрим, как это работает.

Прекрасно работает.
Вы также можете перейти actionTextColorк изменению цвета метки.

Это также отлично работает в Android. Давайте попробуем это с другим цветом текста.

Используемые библиотеки:

1. React Native Модальное окно

Вы можете найти репо здесь.

Если вы нашли эту публикацию в блоге полезной, поделитесь ею с другом.

Если вы обнаружите какие-либо трудности, пожалуйста, не стесняйтесь добавлять свои комментарии.