React Native入门——布局实践：开发京东客户端首页（一(2)
对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！最后，我再重复一次，如果你想成为一个优秀的 Android 开发人员，请集中精力，对基础和重要的事情做深度研究。对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。整理的这些架构技术希望对Android开发的朋友
4.分析搜索栏的基本布局
头部的搜索栏，分为三个部分：logo、输入框、扫码按钮。
其中，logo可以使用Image控件
输入框稍复杂，外层是一个圆角的View，其内部左侧是一个Image，用于展示放大镜Icon，中间为一个TextInput控件用于输入，右侧为一个Image，用于展示语音搜索Icon
右侧扫码按钮也比较简单，仅为一个Image
那么根据FlexBox布局原则，可以按以下方式进行布局：
**这里特别说明一下，**由于React Native不支持自动计算Image等View的大小（参见： http://facebook.github.io/react-native/docs/images.html#why-not-automatically-size-everything），所以我们不能像Android的XML那样，设置为wrap_content，必须为Image指定宽度和高度，而由于React Native使用的是类似Android dp的像素，所以请根据设计图的尺寸自行计算，这里推荐一个网站： https://pixplicity.com/dp-px-converter/
5.代码实现
确定好了搜索栏的布局，那么我们就开始具体使用JavaScript代码进行实现，首先新建一个Header.js的文件，并引入我们需要用到的控件
[javascript] view plain copy
-
’use strict’;
-
import React, {
-
Component
-
Image,
-
TextInput
-
View,
-
StyleSheet
-
} from ’react-native’;
‘use strict’;
import React, {
Component
Image,
TextInput
View,
StyleSheet
} from ‘react-native’;
接着声明类和样式，之所以使用export，是因为要在其他类中使用（如：MainScreen）
[javascript] view plain copy
-
export default class Header extends Component {
-
}
-
const styles = StyleSheet.create({
-
});
export default class Header extends Component {
}
const styles = StyleSheet.create({
});
然后在Header类的render()方法中编写JSX代码，在StyleSheet.create()方法中，编写类CSS的样式，如下：
[javascript] view plain copy
-
export default class Header extends Component {
-
render() {
-
return (
-
)
-
}
-
}
-
const styles = StyleSheet.create({
-
container: {
-
flexDirection: ’row’,
-
paddingLeft: 10,
-
paddingRight: 10,
-
paddingTop: Platform.OS === ’ios’ ? 20 : 0, // 处理iOS状态栏
-
height: Platform.OS === ’ios’ ? 68 : 48, // 处理iOS状态栏
-
backgroundColor: ’#d74047’,
-
alignItems: ’center’
-
}});
export default class Header extends Component {
render() {
return (
)
}
}
const styles = StyleSheet.create({
container: {
flexDirection: ‘row’,
paddingLeft: 10,
paddingRight: 10,
paddingTop: Platform.OS === ‘ios’ ? 20 : 0, // 处理iOS状态栏
height: Platform.OS === ‘ios’ ? 68 : 48, // 处理iOS状态栏
backgroundColor: ‘#d74047’,
alignItems: ‘center’
}});
然后我们在模拟器或者真机上跑一下，看看效果
嗯，不错，貌似是我们想要的效果！接着把图片资源导入项目中去，很简单，只需要在目录创建文件夹，将图片复制进去，WebStorm等IDE即可自动识别
根据我们之前的分析，完成样式表的设计，如下：
[javascript] view plain copy
-
const styles = StyleSheet.create({
-
container: {
-
flexDirection: ’row’, // 水平排布
-
paddingLeft: 10,
-
paddingRight: 10,
-
paddingTop: Platform.OS === ’ios’ ? 20 : 0, // 处理iOS状态栏
-
height: Platform.OS === ’ios’ ? 68 : 48, // 处理iOS状态栏
-
backgroundColor: ’#d74047’,
-
alignItems: ’center’ // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中
-
},
-
logo: {
-
height: 24,
-
width: 64,
-
resizeMode: ’stretch’ // 设置拉伸模式
-
},
-
searchBox: {
-
height: 30,
-
flexDirection: ’row’,
-
flex: 1, // 类似于android中的layout_weight,设置为1即自动拉伸填充
-
borderRadius: 5, // 设置圆角边
-
backgroundColor: ’white’,
-
alignItems: ’center’,
-
marginLeft: 8,
-
marginRight: 12
-
},
-
scanIcon: {
-
height: 26.7,
-
width: 26.7,
-
resizeMode: ’stretch’
-
},
-
searchIcon: {
-
marginLeft: 6,
-
marginRight: 6,
-
width: 16.7,
-
height: 16.7,
-
resizeMode: ’stretch’
-
},
-
voiceIcon: {
-
marginLeft: 5,
-
marginRight: 8,
-
width: 15,
-
height: 20,
-
resizeMode: ’stretch’
-
},
-
inputText: {
-
flex: 1,
-
backgroundColor: ’transparent’,
-
fontSize: 14
-
}
-
});
const styles = StyleSheet.create({
container: {
flexDirection: ‘row’, // 水平排布
paddingLeft: 10,
paddingRight: 10,
paddingTop: Platform.OS === ‘ios’ ? 20 : 0, // 处理iOS状态栏
height: Platform.OS === ‘ios’ ? 68 : 48, // 处理iOS状态栏
backgroundColor: ‘#d74047’,
alignItems: ‘center’ // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中
},
logo: {
height: 24,
width: 64,
resizeMode: ‘stretch’ // 设置拉伸模式
},
searchBox: {
height: 30,
flexDirection: ‘row’,
flex: 1, // 类似于android中的layout_weight,设置为1即自动拉伸填充
borderRadius: 5, // 设置圆角边
backgroundColor: ‘white’,
alignItems: ‘center’,
marginLeft: 8,
marginRight: 12
},
scanIcon: {
height: 26.7,
width: 26.7,
resizeMode: ‘stretch’
},
searchIcon: {
marginLeft: 6,
marginRight: 6,
width: 16.7,
最后
对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！
最后，我再重复一次，如果你想成为一个优秀的 Android 开发人员，请集中精力，对基础和重要的事情做深度研究。
对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。
为了大家能够顺利进阶中高级、架构师，我特地为大家准备了一套高手学习的源码和框架视频等精品Android架构师教程，保证你学了以后保证薪资上升一个台阶。
以下是今天给大家分享的一些独家干货：
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
*。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。
为了大家能够顺利进阶中高级、架构师，我特地为大家准备了一套高手学习的源码和框架视频等精品Android架构师教程，保证你学了以后保证薪资上升一个台阶。
以下是今天给大家分享的一些独家干货：
[外链图片转存中…(img-uZnQ8WLJ-1714513415291)]
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
7
0- 0
已为社区贡献9条内容
所有评论(0)