將rn整合到android中,rn圖片去向
阿新 • • 發佈:2019-02-02
將rn整合到android中,rn中圖片的去向
目錄結構:
index.android.js
import React, {
Component,
} from 'react';
import {
AppRegistry,
Image,
Text,
View,
} from 'react-native';
class DemoProject extends Component
{
constructor(props) {
super(props);
}
render() {
return (
<View>
<Image source={require('./imgs/b.jpg')} />
</View>
);
}
};
AppRegistry.registerComponent('rnImage', () => DemoProject);
MainActivity.java
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "rnImage";
}
}
MainApplication.java
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
@Override
protected String getJSMainModuleName() {
return "index.android";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
使用react-native bundle
–dev false
–platform android
–entry-file index.android.js
–bundle-output android/app/src/main/assets/index.android.bundle
–assets-dest android/app/src/main/res
命令生成bundle檔案。
bundle中對應的載入圖片資原始碼:
__d(function(e,s,t,a){t.exports=s(138).registerAsset({__packager_asset:!0,httpServerLocation:"/assets/imgs",width:63,height:47,scales:[1],hash:"141f9e2d461215a96c4808a8ef76a272",name:"b",type:"jpg"})},295);
可以看到,圖片資源指向了imgs目錄,即b.jpg。
除了生成的bundle檔案,還可以看到在res下生成了對應的圖片資源。
rn將使用的圖片資源copy到android工程中了一份。命名格式:目錄_完整圖片名。
這樣生成了離線圖片資源。