将rn集成到android中,rn图片去向
将rn集成到android中,rn中图片的去向目录结构:index.android.jsimport React, {Component,} from 'react';import {AppRegistry,Image,Text,View,} from 'react-native';class DemoProject extends C
·
将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工程中了一份。命名格式:目录_完整图片名。
这样生成了离线图片资源。
更多推荐
所有评论(0)