React Native SCL Alert: Thêm Các Thông Báo Tùy Chỉnh vào Ứng Dụng React Native của Bạn

react-native-scl-alert

Một thực hiện bằng javascript thuần túy của react native của gói https://github.com/vikmeup/SCLAlertView-Swift

Lộ trình

• Tài liệu để tùy chỉnh kiểu dáng
• Xử lý hướng
• Hình ảnh mặc định cho tiêu đề
• Thành phần Trường Văn Bản
• Nhiều hiệu ứng chuyển đổi hơn

Tính năng

• Giao diện lập trình khai báo (Declarative API)
• Giao diện người dùng có thể tùy chỉnh mạnh mẽ
• Có sẵn các chủ đề được lấy cảm hứng từ bootstrap

Demo

Bạn có thể thử trên expo: https://exp.host/@rafaelmotta021/react-native-scl-alert-demo

hoặc chỉ cần kiểm tra các hình ảnh bên dưới:

Thiết Lập

yarn add react-native-scl-alert

hoặc

npm install --save react-native-scl-alert

Sử Dụng

import React from 'react'
import {
  View,
  Button,
  StyleSheet
} from 'react-native'

import {
  SCLAlert,
  SCLAlertButton
} from 'react-native-scl-alert'

export default class App extends React.Component {
  state = {
    show: false
  }

  handleOpen = () => {
    this.setState({ show: true })
  }

  handleClose = () => {
    this.setState({ show: false })
  }

  render() {
    return (
      <View style={styles.container}>
        <Button title="Show" onPress={this.handleOpen} />
        <SCLAlert
          theme="info"
          show={this.state.show}
          title="Lorem"
          subtitle="Lorem ipsum dolor"
        >
          <SCLAlertButton theme="info" onPress={this.handleClose}>Done</SCLAlertButton>
        </SCLAlert>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

Demo

Bạn có thể tùy chỉnh giao diện và cảm giác của thư viện này theo cách bạn muốn, nhưng nếu bạn muốn, chúng tôi đã cung cấp 6 chủ đề cho bạn:

• default
• inverse
• success
• info
• danger
• warning

SCLAlert

SCLAlertButton

Chi tiết tải về:

Tác giả: rafaelmotta
Nguồn: https://github.com/rafaelmotta/react-native-scl-alert