一切从App从首页起,如果你
- 环境部署好环境,跑一个HelloWorld
- 看过别人的优秀代码
- 尝试自己实现一点控件
给自己一个目标,模仿一些已上线的优秀App,各位看官凭自己审美选择。
这里给出模仿教育软件“完美志愿”的首页Demo教程。
源码地址,请随手star支持一下~
那么做一个首页需要先有什么知识贮备呢,只要以下。
Api:
组件:
<1>基础控件
-
Text
显示文字,文字控件。 -
Image
显示图片,图片控件。 -
StyleSheet
存放控件样式,类似CSS。 -
TouchableNativeFeedback
Android特有按钮,具有触摸反馈波纹效果。 -
StatusBar
状态栏控件,原生顶部。
<2>控件容器
-
View
可包容所有控件,最基础的组件。 -
ListView
列表控件,最常用的列表控件。 -
ScrollView
布局滑动控件,包含住的所有控件为一个整体。 -
ViewPagerAndroid
页片布局控件,用于切换页面。
先大概浏览过上面控件的基础使用方法,就可以动手做首页了。
知识点:
-
组件间的通信
父对子通信 子对父通信
(以上没提到的,不是说不重要不基础,只是简单着来,看上面就可以动手实践。)
一个组件js文件的基础框架,做控件、页面第一步总是要新建以下这个基础class,ES6语法。(可直接复制使用)
import React,{ Component } from 'react';
import{
View,
StyleSheet
} from 'react-native';
export default class Demo extends Component{
render(){
return(
<View style = {styles.container}>
</View>
);
}
}
const styles = StyleSheet.create({
container : {
flex : 1
}
});
以上,完毕。