Gần đây, tôi đã làm việc với các cửa sổ bật lên phương thức trong React Native (một lần nữa!) Và nhận ra rằng đó là một mẫu lặp lại trong nhiều ứng dụng đáng để viết một chút. Vì vậy, đây là một vài bài học kinh nghiệm của tôi khi thực hiện lặp đi lặp lại các hộp thoại phương thức.

Lưu ý: Đối với nhiều trường hợp, bạn có thể ổn khi sử dụng phần mềm tích hợp sẵn Phương thức thành phần từ React Native. Nếu điều đó giải quyết được vấn đề của bạn, tất cả quyền năng dành cho bạn!

React Native Modal

React Native Modal là một thành phần tích hợp đã từng tạo ra phương thức cửa sổ bật lên. Thành phần Phương thức là một cách cơ bản để trình bày nội dung bên trên chế độ xem bao quanh. Ví dụ, chúng tôi sử dụng React Native thành phần được gọi là Modal để hiển thị hình ảnh và văn bản. Nếu bạn cần kiểm soát nhiều hơn việc trình bày các phương thức đối với phần còn lại của ứng dụng, hãy xem xét sử dụng Bộ điều hướng cấp cao nhất.

Bước 1: Cài đặt React Native trên Mac.

Nếu bạn chưa cài đặt React Native CLI trên toàn cầu, hãy cài đặt nó bằng lệnh sau.

npm install -g react-native-cli

Được rồi, bây giờ, hãy gõ lệnh sau để tạo một ứng dụng mới.

react-native init rncreate
cd rncreate

Sau khi cài đặt, chúng ta cần mở ứng dụng này trong hai Trình mô phỏng khác nhau.

Để thử nghiệm trên iOS giả lập, gõ lệnh sau.

react-native run-ios

Mở Dự án trong trình chỉnh sửa yêu thích của bạn.

code .

Bước 2: Thêm nút.

Chúng tôi sẽ hiển thị hai thứ bên trong Modal.

  1. Chữ
  2. Hình ảnh

Vì vậy, bên trong thư mục gốc, hãy tạo một thư mục có tên là tài sản, và bên trong đó, hãy tạo một thư mục có tên là hình ảnh và thêm hình ảnh từ máy cục bộ của bạn và sao chép hình ảnh vào thư mục này.

Được rồi, bây giờ Thêm Nút và Hình ảnh bên trong Chế độ xem vùng chứa. Nhập mã sau vào bên trong App.js.

// App.js

import React, { Component } from 'react';
import Krunal from './assets/images/Krunal.jpg';
import { View, Button, StyleSheet } from 'react-native';

export default class App extends Component {

  render() {
    	return (
        <View style = { styles.container }>
          <Button 
            onPress = { () => console.log('Button Pressed') }
            title = "Open Modal"
            color = "orange">
          </Button>
        </View>
      )
    }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 300,
  }
});

Vì vậy, ở đây chúng tôi đã thêm một Nút, và chúng tôi cũng đã nhập tệp hình ảnh. Chúng tôi chưa sử dụng nó, nhưng chúng tôi sẽ sử dụng nó trong một phút.

Khi người dùng nhấp vào nút, mục tiêu của chúng tôi là Modal sẽ bật lên; nếu không, nó sẽ không bật lên, và chúng ta không thể nhìn thấy nó. Vì vậy, bây giờ chúng tôi nhập thêm một thành phần nữa và chuyển Hình ảnhChữ làm chỗ dựa cho thành phần đó.

Ngoài ra, theo mặc định, Phương thức luôn mở, vì vậy chúng tôi cần xử lý theo cách của mình. Đó là lý do tại sao chúng ta cần trạng thái mà chúng ta có thể kiểm soát, và cuối cùng chúng ta kiểm soát Phương thức.

Bước 3: Tạo tệp DisplayModal.js.

Bây giờ, hãy tạo một thư mục bên trong thư mục gốc có tên là các thành phần và tạo một tệp có tên DisplayModal.js và thêm mã sau.

// DisplayModal.js

import React from 'react'
import { Modal, View, Image, Text, StyleSheet } from 'react-native';

const DisplayModal = (props) => (
  <Modal visible={ props.display } animationType = "slide" 
         onRequestClose={ () => console.log('closed') }>>
    <View>
      <Image 
        source = { props.image } 
        style = { styles.image } />
      <Text style = { styles.text }>
        { props.data }
      </Text>
    </View>
  </Modal>
)

const styles = StyleSheet.create({
  image: {
    marginTop: 20,
    marginLeft: 90,
    height: 200,
    width: 200
  },
  text: {
    fontSize: 20,
    marginLeft: 150
  }
})

export default DisplayModal;

DisplayModal là một thành phần tĩnh, và nó không liên quan gì đến Trạng thái. Vì vậy, tôi đã sử dụng nó như một thành phần chức năng. Nó chỉ chấp nhận các đạo cụ và hiển thị chúng ở dạng theo kiểu.

Bạn có thể lưu ý rằng chúng tôi đã sử dụng Modal’s có thể nhìn thấy tài sản. Vì vậy, khi nó là sự thật, chúng ta có thể xem Phương thức. Nếu không, chúng ta không thấy Phương thức. Do đó, nó được kiểm soát bởi thành phần mẹ và trong trường hợp của chúng tôi, nó được App.js.

Vì vậy, khi người dùng nhấp vào, chúng tôi thay đổi trạng thái của thuộc tính hiển thị bên trong App.js đến thậtvà bây giờ chúng ta có thể thấy Phương thức.

Bây giờ, hãy viết đoạn mã sau bên trong một App.js tập tin.

// App.js

import React, { Component } from 'react';
import Krunal from './assets/images/Krunal.jpg';
import { View, Button, StyleSheet } from 'react-native';
import DisplayModal from './components/DisplayModal';

export default class App extends Component {

  state = {
    display: false
  }

  triggerModal() {
    this.setState(prevState => {
      return {
        display: true
      }
    });
  }

	render() {
    	return (
        <View style = { styles.container }>
          <Button 
            onPress = { () => this.triggerModal() }
            title = "Open Modal"
            color = "orange">
          </Button>
          <DisplayModal 
            image = { Krunal }
            data = "Krunal"
            display = { this.state.display }
          />
        </View>
      )
  	}
}

const styles = StyleSheet.create({
  container: {
    marginTop: 300,
  }
});

Vì vậy, ở đây, chúng tôi đã xác định trạng thái một trạng thái được gọi là hiển thị và theo mặc định, nó là false. Tuy nhiên, khi người dùng nhấp vào nút, nó sẽ chuyển thành true và chúng ta có thể thấy Modal sẽ bật lên.

Bước 4: Thuộc tính phương thức.

Bạn có thể tìm hiểu thêm về Thuộc tính Phương thức trên này Liên kết.

Ở đây, chúng tôi đã sử dụng một thuộc tính Modal được gọi là animationType.

animationType

Nó có các giá trị sau.

  1. trượt: trượt từ dưới lên.
  2. phai màu: mờ dần trong tầm nhìn.
  3. không ai xuất hiện mà không có hoạt ảnh.

Chúng tôi vừa dùng slide, nhưng bạn có thể thử làm mờ dần và xem nó có thể thay đổi hiệu ứng hoạt ảnh bố cục như thế nào.

Dễ thấy

Các có thể nhìn thấy thuộc tính chấp nhận hai đối số.

  1. thật
  2. sai

Nếu nó là sự thật, nó sẽ hiển thị bên trong màn hình; nếu không, nó sẽ không. Vì vậy, chúng tôi đã chuyển thuộc tính hiển thị bên trong Modal khi nút được nhấp.

Cuối cùng, Ví dụ về phương thức React Native | Modal In React Native Tutorial đã kết thúc.

Phiên bản cơ bản của Cửa sổ bật lên phương thức React Native

Hãy tưởng tượng một phương thức mà chúng ta có thể thấy trong nhiều ứng dụng đơn giản. Trong trường hợp cơ bản như vậy, khả năng hiển thị của phương thức được quản lý nội bộ bởi trạng thái cục bộ của thành phần nào đó. Xem đoạn mã sau.

class NewScreen extends Component {
  state = { showConfirmation: false };

  handleSubmit = value => {
    this.setState({ showConfirmation: true, value: value });
  };

  // Handler for when the user confirms their choice in the modal
  handleConfirm = () => {
    // …
  };

  // Handler for when the user cancels the confirmation dialog
  handleCancel = () => {
    this.setState({ showConfirmation: false });
  };

  render() {
    const { showConfirmation } = this.state;

    return (
      <View style={styles.container}>
        {showConfirmation && <Dialog onCancel={this.handleCancel} onConfirm={this.handleConfirm} />}
      </View>
    );
  }
}

export default NewScreen;

Đây là một phương thức điển hình mà tôi đã thấy nhiều lần. Thành phần cha xử lý khả năng hiển thị của nó bằng cách thay đổi trạng thái bên trong của nó.

Chúng tôi sẽ nhận được showConfirmation từ trạng thái cục bộ và tùy thuộc vào việc nó được đặt hay không, hiển thị hoặc ẩn hộp thoại xác nhận.

Chúng tôi cũng sẽ chuyển các nút handleConfirm và handleCancel để xử lý logic sẽ xảy ra khi người dùng nhấn bất kỳ nút nào trong số đó.

Chính thuận lợi của giải pháp này là nó đơn giản, dễ đọc (và lý do) và dễ tùy chỉnh ở mọi chế độ xem.

Chính nhược điểm là mặc dù nó đơn giản, nhưng có mã quản lý mà chúng ta cần viết trong mọi thành phần sử dụng nó. Ngoài ra, nó có thể được tùy chỉnh ở bất cứ nơi nào được sử dụng, điều này gây khó khăn cho việc thay đổi nó trên toàn cầu.

Bài viết được đề xuất

Các thành phần React Native Swipe

React Native Drawer Navigator

React Native Tab View

Điều hướng gốc bằng cách sử dụng Điều hướng gốc của React

React Native Redux

React Native Fetch

React Native Animation

React Native FlatList

React Native Firebase

Cách thiết lập React Native bằng Expo