鈥?strong>鈥嬧€滄槑鏄庣敤React Native鍐欏ソ浜嗛〉闈紝涓哄暐杩樿鎶樿吘鍘熺敓浠ｇ爜锛烰S鍜孞ava鍒板簳鎬庝箞闅旂┖瀵硅瘽锛熲€濃€?/strong>鈥?br/> 鍘诲勾鏈変釜鍋氱數鍟嗙殑鏈嬪弸鎵炬垜鏁戞€ワ紝浠栦滑鐨凴eact Native App姝绘椿璋冧笉璧峰畨鍗撴壂鐮佹ā鍧椼€傛姌鑵句袱澶╁悗鍙戠幇锛岄棶棰樺氨鍑哄湪鈥?strong>鈥嬮€氫俊鍗忚娌″榻愨€?/strong>鈥嬨€備粖澶╁挶浠氨鎺板紑鎻夌浜嗚锛屾€庝箞璁㎎S鍜孞ava鍦≧eact Native閲岄『鍒╃壍鎵嬨€?/p>

涓€銆佸師鐢熸ā鍧楀熀纭€璇撅細NativeModules涓夋澘鏂?/h2>

鈥?strong>鈥嬧€滃惉璇磋鍐欎粈涔堝師鐢熸ā鍧楋紝鏄笉鏄緱鍏堝Java锛熲€濃€?/strong>鈥?br/> 鍒厡锛丷eact Native鏃╁氨澶囧ソ浜嗏€?strong>鈥婲ativeModules鈥?/strong>鈥嬭繖鎶婄憺澹啗鍒€銆傚氨绠椾綘Java姘村钩鍋滅暀鍦?Hello World"锛岀収鏍疯兘鐜╄浆鍩虹閫氫俊銆?/p>

鈻嶁€?strong>鈥嬫墜鎶婃墜鍒涘缓绗竴涓ā鍧椻€?/strong>鈥嬶細

1. 鏂板缓CustomModule.java锛?/li>

java澶嶅埗
public class CustomModule extends ReactContextBaseJavaModule {
    // 蹇呴』鐨勬ā鍧楀悕娉ㄥ唽
    @Override
    public String getName() { return "CustomModule"; }

    // 鏆撮湶缁橨S鐨勬柟娉?/span>
    @ReactMethod
    public void showMessage(String msg) {
        Toast.makeText(getReactApplicationContext(), msg, Toast.LENGTH_LONG).show();
    }
}

1. 鍒涘缓鍖呯鐞嗗櫒CustomPackage.java锛?/li>

java澶嶅埗
public class CustomPackage implements ReactPackage {
    @Override
    public List createNativeModules(...) {
        return Arrays.asList(new CustomModule());
    }
    //...鍏朵粬蹇呰鏂规硶
}

1. 鍦∕ainApplication.java娉ㄥ唽锛?/li>

java澶嶅埗
@Override
protected List getPackages() {
    return Arrays.asList(
        new MainReactPackage(),
        new CustomPackage() // 娣诲姞鑷畾涔夊寘
    );
}

鈥?strong>鈥嬧殸锔?鏂版墜蹇呰俯鐨勫潙鈥?/strong>鈥嬶細

• 蹇樿鍔?code>@ReactMethod娉ㄨВ锛孞S绔娲绘壘涓嶅埌鏂规硶
• 妯″潡鍚嶇敤浜嗙壒娈婂瓧绗︼紝瀵艰嚧JS璋冪敤鏃舵姤undefined
• 娌″鐞嗙嚎绋嬮棶棰橈紝鍦ㄤ富绾跨▼鍋氳€楁椂鎿嶄綔鐩存帴鍗℃

---

浜屻€佸弻鍚戦€氫俊杩涢樁锛氫簨浠剁洃鍚笌鍥炶皟

鈥?strong>鈥嬧€淛ava澶勭悊瀹屾€庝箞閫氱煡JS锛熸€讳笉鑳藉共绛夌潃鍚э紵鈥濃€?/strong>鈥?br/> 杩欐椂鍊欏氨寰楄鍑衡€?strong>鈥嬩簨浠跺彂灏勫櫒锛圗ventEmitter锛夆€?/strong>鈥嬪拰鈥?strong>鈥嬪洖璋冩満鍒垛€?/strong>鈥嬭繖瀵归粍閲戞惌妗ｄ簡銆?/p>

鈻嶁€?strong>鈥嬫柟妗堝姣旇〃鈥?/strong>鈥嬶細

鈥?strong>鈥嬸煂?瀹炴垬妗堜緥鈥斺€旇幏鍙栬澶囩數閲忊€?/strong>鈥嬶細

java澶嶅埗
// Java绔?/span>
@ReactMethod
public void getBatteryLevel(Promise promise) {
    try {
        Intent batteryIntent = context.registerReceiver(null,
            new IntentFilter(Intent.ACTION_BATTERY_CHANGED));
        int level = batteryIntent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);
        promise.resolve(level);
    } catch (Exception e) {
        promise.reject("BATTERY_ERROR", e);
    }
}

javascript澶嶅埗
// JS绔?/span>
import { NativeModules } from 'react-native';
NativeModules.CustomModule.getBatteryLevel()
    .then(level => console.log(`褰撳墠鐢甸噺锛?span>${level}%`))
    .catch(err => console.error(err));

涓夈€佺涓夋柟搴撶敓瀛樻寚鍗楋細Bridge vs TurboModules

鈥?strong>鈥嬧€滃惉璇存柊鏋舵瀯瑕佸簾寮冩棫妗ユ帴鏂瑰紡锛熺幇鍦ㄥ杩欎簺浼氫笉浼氳繃鏃讹紵鈥濃€?/strong>鈥?br/> 鍒€曪紒Facebook鎺ㄥ嚭鐨勨€?strong>鈥婽urboModules鈥?/strong>鈥嬬‘瀹炲湪鎬ц兘涓婃湁鎻愬崌锛屼絾鐜版湁椤圭洰杩佺Щ闇€瑕佹椂闂淬€傚挶浠殑绛栫暐鏄細鈥?strong>鈥嬭€侀」鐩敤Bridge淇濈ǔ瀹氾紝鏂板姛鑳藉皾璇昑urboModules鈥?/strong>鈥嬨€?/p>

鈻嶁€?strong>鈥嬩紶缁烞ridge涓嶵urboModules瀵规瘮鈥?/strong>鈥嬶細

• 鈥?strong>鈥嬪垵濮嬪寲鏃舵満鈥?/strong>鈥嬶細Bridge闅忓簲鐢ㄥ惎鍔ㄥ姞杞斤紝TurboModules鎸夐渶鍔犺浇
• 鈥?strong>鈥嬬被鍨嬫敮鎸佲€?/strong>鈥嬶細TurboModules鐩存帴鏀寔Double,Float绛夊鏉傜被鍨?/li>
• 鈥?strong>鈥嬫柟娉曡皟鐢ㄢ€?/strong>鈥嬶細TurboModules閲囩敤C++瀹炵幇锛岄€氫俊閫熷害鎻愬崌3鍊?/li>

鈥?strong>鈥嬸煈?杩佺Щ灏忚创澹€?/strong>鈥嬶細

1. 鍏堢敤react-native-codegen鑷姩鐢熸垚绫诲瀷瀹氫箟
2. 閫愭鏇挎崲鍏抽敭妯″潡锛屾瘮濡傞绻佽皟鐢ㄧ殑鏀粯SDK
3. 娉ㄦ剰Android绔渶瑕侀厤缃瓹MakeLists.txt

璇寸偣鐪熷疄鐨勯」鐩粡楠?/h2>

鍘诲勾鎺ユ墜杩囦竴涓棩娲?0涓囩殑璺ㄥ鐢靛晢App锛屼粬浠殑React Native椤甸潰璋冪敤鍘熺敓鐩告満缁忓父OOM宕╂簝銆傛渶鍚庡彂鐜版槸JS绔绻佸彂閫乥ase64鍥剧墖鏁版嵁锛屾妸閫氫俊閫氶亾鍫垫浜嗐€傛敼鎴愨€?strong>鈥嬪師鐢熷帇缂╁悗鍐嶄紶鏂囦欢璺緞鈥?/strong>鈥嬶紝宕╂簝鐜囩洿鎺ラ檷浜?0%銆?/p>

鐜板湪鐪嬪埌鏂颁汉鍔ㄤ笉鍔ㄥ氨鍏ㄩ噺浼犺緭鏁版嵁锛岀湡鎯冲惣涓€鍡撳瓙锛氣€?strong>鈥嬧€滈€氫俊涓嶆槸浼犳儏涔︼紝鍒暐閮藉線閲屽锛佲€濃€?/strong>鈥?璁颁綇涓変釜鍘熷垯锛?/p>

1. 鑳界敤绠€鍗曠被鍨嬪氨鍒敤澶嶆潅瀵硅薄
2. 鑳藉紓姝ュ氨鍒悓姝?/li>
3. 鑳藉皯浼犱竴涓瓧鑺傞兘鏄儨鍒?/li>

鏈€鍚庨€佸ぇ瀹朵竴鍙ヨ瘽锛氣€?strong>鈥嬫妧鏈€夊瀷鐪嬪満鏅紝閫氫俊璁捐閲嶈妭鍒垛€?/strong>鈥嬨€傛妸杩欎笁鏉挎枾缁冪啛浜嗭紝涓嬫閬囧埌鈥淩N璋冪敤鍘熺敓钃濈墮鎵撳嵃鈥濊繖绉嶉渶姹傦紝浣犲氨鑳芥贰瀹氬湴璇达細鈥滃皬case锛岀粰鎴戝崐灏忔椂锛佲€?/p>