1、了解目录结构
2、页面
2.1组件
2.2布局
2.3样式
3、页面跳转
3.1RN页面间跳转
App.js //初始化路由 npm install react-native-deprecated-custom-components安装Navigator
import React, {Component} from 'react';
import Navigator from 'react-native-deprecated-custom-components';
import A from './src/A'
export default class App extends Component {
render() {
let defaultName='A';
let defaultComponent=A
return (
<Navigator.Navigator
initialRoute={{
name:defaultName,
component:defaultComponent
}}
renderScene={(route,navigator)=>{
let Component=route.component;
return(<Component {...route.params} navigator={navigator}/>);
}}
/>
);
}
}
A.js
import React,{ Component } from 'react';
import {
View,ScrollView,Text
} from 'react-native'
import B from './B'
export default class A extends Component{
//初始化函数
constructor(props){//旧版本getInitialState()
super(props)
this.state={//定义变量
id:2,
user:'Viknando',
userName:null
}
}
_pressBtn(){
const{navigator}=this.props;
const self=this;
if(navigator){
navigator.push({//页面跳转
name:'B',
component:B,
params:{
user:this.state.user,
id:this.state.id,
//将此方法作为参数传到B中调用
getUserName:function(userName){
self.setState({
userName:userName
})
}
}
})
}
}
render(){
if(this.state.userName){
return(<View>
<Text></Text>
<Text></Text>
<Text>user:{JSON.stringify(this.state.userName)}</Text>
</View>)
}else{
return(
<ScrollView>
<Text></Text>
<Text></Text>
<Text onPress={this._pressBtn.bind(this)}>Hello!</Text>
<Text onPress={this._pressBtn.bind(this)}>Viknando!</Text>
</ScrollView>
)
}
}
}
B.js
import React,{ Component } from 'react';
import {
ScrollView,Text
} from 'react-native'
export default class B extends Component{
constructor(props){
super(props)
this.state={
id:null
}
}
_pressBtn(){
const{navigator}=this.props;
const USER_MODELS={
1:{name:'Domsting',age:'24'},
2:{name:'Viknando',age:'20'},
}
if(this.props.user){
let userNameModel=USER_MODELS[this.props.id];
this.props.getUserName(userNameModel)//B invoked fun of A
}
if(navigator){
navigator.pop();
}
}
render(){
return(
<ScrollView>
<Text></Text>
<Text></Text>
<Text>userId:{this.state.id}</Text>
<Text onPress={this._pressBtn.bind(this)}>author:{this.state.user}</Text>
</ScrollView>
)
}
componentDidMount(){
this.setState({
id:this.props.id,
user:this.props.user
})
}
}
3.2RN与原生页面间跳转
原生页面->RN：
tv_jump_rn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
jumpToRN();
}
});
public void jumpToRN(){
Intent intent=new Intent(this,MainActivity.class);//跳转的怎么是class？
startActivity(intent);
this.finish();
}
Q：跳转的怎么是class？原来MainActivity继承了ReactActivity，从而跳转到了RN页面。
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 "RNjsWithNative";
}
}
Q：这样就跳转了？我们得知道这几点：
1、android工程中MainApplication声明了ReactApplication，getPackages()返回了new MainReactPackage()，之后我们添加模块也要添加Package,我这里添加了new JumpRP()
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(),new JumpRP()
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
2、MainActivity中getMainComponentName将我们定义的模块名：RNjsWithNative返回给了RN，在入口文件我们注册了RNjsWithNative对应的组件app，还记得AppRegistry.registerComponent('RNjsWithNative', () => app);么？MainActivity与RN对应的app模块才绑定在了一起
RN页面->原生
RN页面的点击事件代码是这样的,startActivityFromJS方法是自定义的？"com.rnjswithnative.BActivity"是包名？
<Text style={styles.welcome}
onPress={() => NativeModules.Native_Module.startActivityFromJS("com.rnjswithnative.BActivity", "this msg from RN")}>
Jump to NativePage!!!
</Text>
image.png
我们得知道这几点：
1、JumpModule继承了ReactContextBaseJavaModule，定义了用@ReactMethod修饰的startActivityFromJS方法
@ReactMethod
public void startActivityFromJS(String name, String params){
try{
Activity currentActivity = getCurrentActivity();
if(null!=currentActivity){
Class toActivity = Class.forName(name);
Intent intent = new Intent(currentActivity,toActivity);
intent.putExtra("msg", params);
currentActivity.startActivity(intent);
}
}catch(Exception e){
throw new JSApplicationIllegalArgumentException(
"不能打开Activity : "+e.getMessage());
}
}
2、JumpRP 声明了ReactPackage，new了JumpModule，也添加到了MainApplication
public class JumpRP implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(new JumpModule(reactContext));
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
如果RN要向原生发消息，调用JumpModule里自己定义的方法就行。献上这个🌰
可以开始敲代码了，在代码中学习
先来几个小🌰吃一吃：先图再代码如何？
image.png
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';
export default class image_demo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Nativ!
</Text>
<Image source={{uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1104142377,1692686148&fm=27&gp=0.jpg'}} style={styles.imageStyle} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
image.png
export default class App extends Component{
render(){
return(
<View style={styles.container}>
<View style={[styles.item,styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style={[styles.item,styles.lineLeftRight]}>
<View style={[styles.center,styles.flex,styles.lineCenter]}>
<Text style={styles.font}>
海外酒店
</Text>
</View>
<View style={[styles.center,styles.flex]}>
<Text style={styles.font}>
特惠酒店
</Text>
</View>
</View>
<View style={styles.item}>
<View style={[styles.center,styles.flex,styles.lineCenter]}>
<Text style={styles.font}>
团购
</Text>
</View>
<View style={[styles.center,styles.flex]}>
<Text style={styles.font}>
客栈
</Text>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
marginTop:20,
marginLeft:5,
marginRight:5,
borderRadius:5,
padding:2,
// borderColor:'blue',
// borderWidth:1,
flexDirection:'row',
backgroundColor:'#FF0067'
},
item:{
flex:1,
height:80
},
center:{
justifyContent:'center',
alignItems:'center'
},
font:{
color:'#fff',
fontSize:16,
fontWeight:'bold'
},
flex:{
flex:1
},
lineLeftRight:{
borderLeftWidth:1,
borderRightWidth:1,
borderColor:'#fff'
},
lineCenter:{
borderBottomWidth:1,
borderColor:'#fff'
}
});
image.png
var imgs = [ 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1104142377,1692686148&fm=27&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1104142377,1692686148&fm=27&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1104142377,1692686148&fm=27&gp=0.jpg'
];//需要自己重新赋值链接，
class MyImage extends Component{
constructor(props){
super(props);
var imgs=this.props.imgs;
this.state={
imgs:imgs,
count:0,
}
}
goNext(){
var count = this.state.count;
count++;
if(count<imgs.length){
this.setState({
count:count,
})
}else{
this.setState({
count:0,
})}
}
goPreView(){
var count = this.state.count;
count--;
if(count>=0){
this.setState({
count:count,
})
}else{
this.setState({
count:imgs.length-1,
})
}
}
render(){
return(
<View style={[styles.flex]}>
<View style={styles.image}>
<Image style={styles.img} source={{uri:this.state.imgs[this.state.count]}} resizeMode='contain'/>
</View>
<View style={styles.btns}>
<TouchableOpacity onPress={this.goPreView.bind(this)}>
<View style={styles.btn}>
<Text>preview</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.goNext.bind(this)}>
<View style={styles.btn}>
<Text>next</Text>
</View>
</TouchableOpacity>
</View>
</View>
)
}
}
export default class App extends Component{
render(){
return(
<View style={[styles.flex, {marginTop:40}]}>
<MyImage imgs={imgs}></MyImage>
</View>
);
}
}
var styles = StyleSheet.create({
flex:{
flex: 1,
alignItems:'center'
},
image:{
borderWidth:1,
width:300,
height:200,
borderRadius:5,
borderColor:'#ccc'
},
img:{
height:200,
width:300,
},
btns:{
flexDirection: 'row',
justifyContent: 'center',
marginTop:20
},
btn:{
width:60,
height:30,
borderColor: '#0089FF',
borderWidth: 1,
justifyContent: 'center',
alignItems:'center',
borderRadius:3,
marginRight:20,
},
});
