用前端技术做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合并为一个文件,小公司,体谅下。
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还自带了很炫酷的效果。
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).也有的时候,节约资源,直接通过方法导出的方式。
以上都是基础,还有很多地方都需要修改。讲的不对的地方,需要大神指点!