2016-08-06 24 views
6

Tôi hiện đang sử dụng mô hình react-native-safari-view trong dự án React Native để hiển thị lượt xem web trong iOS.Tôi có thể yêu cầu một mô-đun cụ thể cho iOS trong React Native không?

Như module chưa được thực hiện dành cho Android, khi tôi cố gắng xây dựng các dự án dành cho Android, nó mang lại cho tôi một lỗi ở dòng này:

import SafariView from 'react-native-safari-view' 

Tôi sẽ sử dụng thư viện Linking dành cho Android , nhưng tôi không biết cách sử dụng cùng một mã cho hai nền tảng.

tôi đã cố gắng:

if (Platform.OS == 'ios') { 
    import SafariView from 'react-native-safari-view' 
} 

Và nó mang lại cho tôi lỗi này:

import' and 'export' may only appear at the top level

Làm thế nào để làm được việc này?

Trả lời

3

Bạn có thể tách mã nền tảng bằng cách tạo hai tệp khác nhau your_file_name.android.jsyour_file_name.ios.js. Vì vậy, bạn có thể tạo hai phiên bản cho tệp mà bạn muốn sử dụng SafariView hoặc bạn có thể tạo trình bao bọc xung quanh SafariView sẽ xuất mô-đun này trên iOS và đối tượng giả trên Android, sau đó sử dụng trình bao này với kiểm tra Platform.OS.

4

Để làm được việc này tôi đã được sử dụng require thay (nhưng chủ yếu là cho các module chứ không phải thành phần):

var SafariView; 

if (Platform.OS == 'ios') { 
    SafariView = require('react-native-safari-view'); 
} 

Đối với tình trạng này đặc biệt Tôi chắc chắn sẽ đi cho cách tiếp cận Konstantin Kuznetsov của - Chỉ cần gắn bó này ở đây vì nó có thể giúp người khác khi tạo thành phần bao bọc với các tệp riêng biệt có thể quá mức cần thiết :)

+1

tôi đã có thêm '.default' để kết thúc quá trình nhập trong trường hợp của tôi. Trong trường hợp này, nó sẽ là: 'SafariView = require ('phản ứng-native-safari-view'). Mặc định;' –

3

mã nền tảng cụ thể phức tạp hơn, bạn nên xem xét tách mã ra thành các tệp riêng biệt. React Native sẽ phát hiện khi tệp có tệp .ios. hoặc .android. mở rộng và tải tệp nền tảng có liên quan khi được yêu cầu từ các thành phần khác.

Ví dụ, nói rằng bạn có các tập tin sau đây trong dự án của bạn:

BigButton.ios.js 
BigButton.android.js 

Sau đó bạn có thể yêu cầu các thành phần như sau:

import BigButton from './BigButton' 

tham khảo https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions

Các vấn đề liên quan