React Native TextInput Utils: Tạo Nút điều khiển TextInput Tùy chỉnh

React Native TextInput Utils (chỉ hỗ trợ iOS)

GÓI NÀY KHÔNG CÒN ĐƯỢC BẢO TRÌ KỂ TỪ NĂM 2018 VÀ KHÔNG HOẠT ĐỘNG VỚI PHIÊN BẢN MỚI NHẤT CỦA REACT NATIVE

Một tiện ích mở rộng React Native cho phép bạn kiểm soát TextInput một cách tốt hơn.

Tên gốc của nó là react-native-keyboard-toolbar, vì phiên bản mới thêm một số tính năng, tôi nghĩ rằng tên cũ không phù hợp cho gói này.

Dòng thời gian

.3.7 – Bây giờ hỗ trợ RN 0.40

.3.6 – Tính năng mới setPickerRowByIndex và reloadPickerData bởi @DaveAdams88

.2.5 – Thêm sự hỗ trợ hoàn toàn cho multiline <TextInput/>

.2.1 – Thêm sự hỗ trợ cho tintColor, có thể đặt màu con trỏ

.2 – Thêm sự hỗ trợ cho dismissKeyboard, moveCursorToLast và setSelection

.1 – Thêm sự hỗ trợ cho việc đặt một UIPickerView làm inputView

Tôi có thể làm gì?

. Thêm UITabBarItem(s) vào bàn phím của <TextInput/>
. Thêm một UIPickerView làm bàn phím mặc định của <TextInput/>
. Đặt khu vực lựa chọn hoặc con trỏ bằng chỉ hai tham số, đó là start và length

Thành phần_PickerIOS_ trong React Native 0.13 không thể được tùy chỉnh ngoài_NavigatorIOS_

Giới hạn

Tiện ích này không hỗ trợ <TextInput/> với multiline={true}, và tôi cần một thời gian để tìm hiểu. Nếu bạn có ý tưởng, rất hoan nghênh gửi cho tôi một PR.

Cài đặt

Vẫn rất đơn giản để sử dụng

cd vào thư mục dự án React Native của bạn và chạy

npm install react-native-textinput-utils --save

Cách chạy

Chạy bản demo

Tải xuống và mở tệp RCTTextInputUtilsDemo.xcodeproj, sau đó chạy.

Sử dụng gói này trong dự án khác

Bạn có thể cần thêm es7.classProperties vào PROJECT_ROOT/npm_modules/react-native/packager/transformer.js và PROJECT_ROOT/npm_modules/react-native/packager/react-packager/.babelrc của bạn.

Cấu hình iOS

. Trong XCode, trong trình duyệt dự án, nhấp chuột phải vào Libraries ➜ Thêm tệp vào [tên dự án của bạn]
. Đi đến node_modules ➜ react-native-textinput-utils và THÊM RCTTextInputUtils.xcodeproj
. Kéo libRCTKeyboardToolbar.a (từ ‘Sản phẩm’ dưới RCTTextInputUtils.xcodeproj) vào Tổng quan ➜ Khung và Thư viện Liên kết. (Xem GIF bên dưới)
. Chạy dự án của bạn (Cmd+R)

Sử dụng cơ bản

var RCTKeyboardToolbarTextInput = require('react-native-textinput-utils');


<RCTKeyboardToolbarTextInput
  leftButtonText='I_AM_CANCEL_BUTTON'
  rightButtonText='I_AM_DONE_BUTTON'
  onCancel={(dismissKeyboard)=>dismissKeyboard()}
  onDone={(dismissKeyboard)=>dismissKeyboard()}
/>

Nếu bạn muốn sử dụng UIPickerView

var pickerViewData = [
  {
    label: 'One',
    value: 'ValueOne'
  },
  {
    label: 'Two',
    value: 'ValueTwo'
  },
  {
    label: 'Three',
    value: 'ValueThree'
  }
];


<RCTKeyboardToolbarTextInput
  pickerViewData={pickerViewData}
  onPickerSelect={(selectedIndex)=>{console.log(`selected ${selectedIndex}`)}}
  ...
/>

Nếu bạn muốn đặt màu con trỏ

<RCTKeyboardToolbarTextInput
  tintColor='red'
  ...
/>

Nếu bạn muốn đặt khu vực lựa chọn

<RCTKeyboardToolbarTextInput
  ref='reference'
  ...
/>

và bạn có thể gọi

this.refs['reference'].setSelection(start, length);

Hoặc bạn chỉ muốn đơn giản di chuyển con trỏ đến cuối cùng

this.refs['reference'].moveCursorToLast();

Hoặc tắt bàn phím bất kỳ lúc nào bạn muốn

this.refs['reference'].dismissKeyboard();

Cấu hình

Đối tượng **< TabBarNavigator/>** có thể nhận các thuộc tính sau:

Tham số Cơ bản

• leftButtonText: Văn bản trong UIToolBarItem phía bên trái, nếu giá trị này trống, UIToolBarItem ở bên trái sẽ không được tạo ra
• rightButtonText: Văn bản trong UIToolBarItem phía bên phải, nếu giá trị này trống, UIToolBarItem ở bên phải sẽ không được tạo ra
• onCancel: Hàm gọi lại của UIToolBarItem phía bên trái
• onDone: Hàm gọi lại của UIToolBarItem phía bên phải
• tintColor: Màu con trỏ

Và cả onCancel và onDone sẽ truyền lại một hàm, nếu bạn gọi hàm đó, bàn phím sẽ bị tắt.

[[ĐẢO_NGƯỢC_CHO_MÃ_9]]

Các Tham số liên quan đến PickerView

• pickerViewData: Nguồn dữ liệu cho PickerView, nên là một Mảng, trong đó mỗi phần tử là một Đối tượng, và label trong mỗi Đối tượng sẽ được hiển thị trong PickerView
• onPickerSelect: Hàm gọi lại khi người dùng chọn một tùy chọn, sẽ truyền lại selectedIndex, bạn có thể sử dụng chỉ mục này để tham khảo lại dữ liệu của bạn trong Mảng

[[ĐẢO_NGƯỢC_CHO_MÃ_10]]

Nếu bạn đặt**ref** cho thành phần này, bạn có thể tham khảo lại sau khi**constructor** được gọi. Bạn có thể sử dụng**this.refs[YOUR_REFERENCE]** để truy cập các phương thức liên quan đến Thành phần.

Dưới đây là các phương thức

• dismissKeyboard: Nếu bạn muốn tắt bàn phím hoặc UIPickerView, chỉ cần gọi nó.
• moveCursorToLast: Nếu bạn muốn đặt con trỏ vào vị trí cuối cùng, chỉ cần gọi nó.
• setSelection(start, length): Sử dụng phương thức này, bạn có thể đặt khu vực lựa chọn, nếu length = 0, con trỏ sẽ di chuyển đến vị trí start.

Câu hỏi

Nếu có điều gì đó chưa được tài liệu ở đây và không rõ ràng với bạn, hãy thoải mái tạo vấn đề ở đây, tôi sẽ cố gắng trả lời bạn tốt nhất.

Còn điều gì nữa

Hãy thoải mái yêu cầu các tính năng mới, chỉ cần tạo vấn đề. Rất hoan nghênh đóng góp cho tôi thông qua pull request.

Email của tôi me@idickyt.com

Facebook [[ĐẢO_NGƯỢC_CHO_LINK_1]]

Sina Weibo @桐乃

Chi tiết tải về:

Tác giả: DickyT
Nguồn: [[ĐẢO_NGƯỢC_CHO_LINK_2]]