2016-08-06 13 views
6

Şu anda iOS'ta web görünümlerini göstermek için React Native projemde react-native-safari-view10 modülünü kullanıyorum.Özellikle iOS için React Native'da bir modül gerektirebilir miyim?

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

Android için Linking kütüphanesini kullanmak için gidiyorum:

modül henüz Android için uygulanmadı gibi

, Android için proje oluşturmaya çalıştığınızda, bana bu çizgide bir hata veriyor ama aynı kodu iki platform için nasıl kullanacağımı bilmiyorum.

Denedim:

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

Ve bana bu hata veriyor: Ben bu sorunu nasıl alabilirim

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

?

cevap

3

Platform kodunu, iki farklı dosya your_file_name.android.js ve your_file_name.ios.js oluşturarak ayırabilirsiniz. Böylece, SafariView'u kullanmak istediğiniz dosya için iki sürüm oluşturabilir veya bu modülü iOS'taki bu modülü ve Android'de kukla nesneyi dışa aktaran bir sarıcı oluşturabilir ve Platform.OS denetimleriyle bu sargıyı kullanabilirsiniz.

4

I (daha doğrusu bileşenleri daha modülleri için ama esas) yerine require kullanıyoruz Bundan kaçınmak için:

var SafariView; 

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

Kesinlikle Konstantin Kuznetsov yaklaşımı için gider bu özel durum için - Sadece burada bu yapışmasını ayrı dosyalar ile bir sarmalayıcı bileşeninin yapılabileceği başka bir kişiye yardımcı olabilir :)

+1

Örneğin

, projenize aşağıdaki dosyaları var demek Benim davamda ithalatın sonuna “.default”. Bu durumda: SafariView = gerektirir ('tepki-yerli-safari-view'). –

3

platforma özgü kod daha karmaşıktır, kodu ayrı dosyalara ayırmayı düşünmelisiniz. React Native, bir dosyanın bir .ios olduğunu algılayacaktır. veya .android. Diğer bileşenlerden gerektiğinde ilgili platform dosyasını uzatma ve yükleme. Bundan sonra aşağıdaki bileşeni gerektirebilir

BigButton.ios.js 
BigButton.android.js 

: Ben eklemek zorunda

import BigButton from './BigButton' 

referansı https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions

İlgili konular