用前端技术做APP是不是感觉很惊喜，是不是很意外？不用做多余的解释，现在前端就是这么6，就是这么高端，就是这么万能，come on！跟我一起来看看怎么用react-native开发app吧！https://reactnative.cn/ react-native中文网，看不懂的可以看下清明老师的讲的课程，讲的还不错，我看了一星期左右，顺利把公司项目做完了，不要崇拜哥，哥只是好学而已。
1、安装环境就不说了，有免费的课程，文档参考https://reactnative.cn/docs/0.51/getting-started.html，安装成功后，基础的配置都已经配置好了，只用编程就可以了。
配置好的目录结构
2、遵守MVC模式编程，MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。简单的说一下，model这里可以理解为，你配置的一些方法模块，view你写的静态页面，controller，用户交互的部分，ajax处理数据部分。本人喜欢把model和controller合并为一个文件，小公司，体谅下。
mvc模式目录
3、配置路由，每个页面都要进行跳转，传值，还可以写一些业务逻辑，https://reactnavigation.org/路由官网api。
import {
StackNavigator, //导入stackNavigator（路由模块）
} from 'react-navigation'; //react-navigation
import Login from './src/pages/Login.js' //导入的模块页面，也就是把页面引用进来。
const App = StackNavigator({ //stackNavigator路由具体参数配置
Login: {screen: Login},
},{
navigationOptions: { //头部具体配置参数
headerBackTitle:"返回",
headerStyle:{backgroundColor:'#13c763'},
headerTitleStyle:{color:'#fff'},
headerBackTitleStyle:{color:'#fff'},
headerTintColor:'#fff'
}
});
export default App; //导出去，app.js会引用这个模块。注意：全局模块，每个页面都已经调用
4、如何在子页面上进行跳转 onPress={() => this.props.navigation.navigate('HouseList', {parkId: this.state.parkId})}，这里有个注意事项，为什么这里要用到()=>{return xxx}箭头函数，因为爱所以爱，温柔经不起安排。哈哈哈，开玩笑的，太喜欢谢霆锋了，打个广告。如果不用到箭头函数，直接在事件里面调用函数，会出现问题，渲染出页面，就会触发事件函数里面内容，希望大家注意。
注意：没有div元素的概念，都需要通过引用组件的方式来引用。onPress事件，只有特殊的组件上才能触发，有效果，如TouchableOpacity还自带了很炫酷的效果。
Image图片，Text文本，Dimensions测量宽度，FlatList做循环上下加载，AsyncStorage缓存
5.现在我们来看看，页面和样式怎么写吧。
export default class RepairImgShow extends Component<{}> { //定义导出组件的名字，路由的时候，跳转到那个组件上。
state={ //定义原始数据
Property:[],
listData:{},
}；
render() { //渲染页面的方法
return (
<View><Text>祝家庄版权所有，不得抄袭</Text></View>
);
};
async componentDidMount() { //生命周期，并用到es7语法，异步。
const {state} = this.props.navigation;
this.setState({ //设置改变数据内容。
source : state.params.source
})
}；
returnLogin=()=>{ //自定义方法，可以写成模块。
AsyncStorage.removeItem("zhuyang");
this.props.navigation.navigate('Login', {parkId: 123})
}
}
const styles = StyleSheet.create({ //自定义样式。
ParkingEnti:{
flex:1,
backgroundColor:"#fff"
},
AreaSearchMain:{
flex:1
}
});
注：样式都是用的小驼峰命名的方式。
现在好了路由跳转，页面，样式都会写了，这样就可以简单的做个APP了，为了使APP里面的一些方法更加复用，我们还要掌握如何去写组件。什么是组件？简单通俗介绍下，请不要说我没有文化。组件就是页面中某块是要经常用到的，提取出来，公用。和写页面一样，直接在需要的界面上引用就可以了引用方法：import RecordItem from '../components/RecordItem .js'。传值给子页面： 父<RecordItem name="祝家庄" /> 子this.props.name
页面一样
页面一样
(2).也有的时候，节约资源，直接通过方法导出的方式。
以上都是基础，还有很多地方都需要修改。讲的不对的地方，需要大神指点！
网友评论