React Native入门——布局实践：开发京东客户端首页（一

那么根据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

print ?

1. ’use strict’;

2. import React, {

3. Component

4. Image,

5. TextInput

6. View,

7. StyleSheet

8. } from ’react-native’;

‘use strict’;

import React, {

Component

Image,

TextInput

View,

StyleSheet

} from ‘react-native’;

接着声明类和样式，之所以使用export，是因为要在其他类中使用（如：MainScreen）

[javascript] view plain copy

print ?

1. export default class Header extends Component {

2. }

3. const styles = StyleSheet.create({

4. });

export default class Header extends Component {

}

const styles = StyleSheet.create({

});

然后在Header类的render()方法中编写JSX代码，在StyleSheet.create()方法中，编写类CSS的样式，如下：

[javascript] view plain copy

print ?

1. export default class Header extends Component {

2. render() {

3. return (

6. )

7. }

8. }

9. const styles = StyleSheet.create({

10. container: {

11. flexDirection: ’row’,

12. paddingLeft: 10,

13. paddingRight: 10,

14. paddingTop: Platform.OS === ’ios’ ? 20 : 0,   // 处理iOS状态栏

15. height: Platform.OS === ’ios’ ? 68 : 48,   // 处理iOS状态栏

16. backgroundColor: ’#d74047’,

17. alignItems: ’center’

18. }});

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

print ?

1. const styles = StyleSheet.create({

2. container: {

3. flexDirection: ’row’,   // 水平排布

4. paddingLeft: 10,

5. paddingRight: 10,

6. paddingTop: Platform.OS === ’ios’ ? 20 : 0,  // 处理iOS状态栏

7. height: Platform.OS === ’ios’ ? 68 : 48,   // 处理iOS状态栏

8. backgroundColor: ’#d74047’,

9. alignItems: ’center’  // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中

10. },

11. logo: {

12. height: 24,

13. width: 64,

14. resizeMode: ’stretch’  // 设置拉伸模式

15. },

16. searchBox: {

17. height: 30,

18. flexDirection: ’row’,

19. flex: 1,  // 类似于android中的layout_weight,设置为1即自动拉伸填充

20. borderRadius: 5,  // 设置圆角边

21. backgroundColor: ’white’,

22. alignItems: ’center’,

23. marginLeft: 8,

24. marginRight: 12

25. },

26. scanIcon: {

27. height: 26.7,

28. width: 26.7,

29. resizeMode: ’stretch’

30. },

31. searchIcon: {

32. marginLeft: 6,

33. marginRight: 6,

34. width: 16.7,

35. height: 16.7,

36. resizeMode: ’stretch’

37. },

38. voiceIcon: {

39. marginLeft: 5,

40. marginRight: 8,

41. width: 15,

42. height: 20,

43. resizeMode: ’stretch’

44. },

45. inputText: {

46. flex: 1,

47. backgroundColor: ’transparent’,

48. fontSize: 14

49. }

50. });

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

}

});

请认真注意上面代码中的注释，标有注释的地方，即为和普通iOS、Android开发不太一样的地方！

由于我们已经将父级元素的排布方向改为水平，所以我们只需将需要展现的元素放入的子元素即可，如下代码所示：

[javascript] view plain copy

print ?

1. export default class Header extends Component {

2. render() {

3. return (

8. <TextInput

9. keyboardType=’web-search’

10. placeholder=’搜索京东商品/店铺’

11. style={styles.inputText}/>

16. )

17. }

18. }

最后

我见过很多技术leader在面试的时候，遇到处于迷茫期的大龄程序员，比面试官年龄都大。这些人有一些共同特征：可能工作了7、8年，还是每天重复给业务部门写代码，工作内容的重复性比较高，没有什么技术含量的工作。问到这些人的职业规划时，他们也没有太多想法。

其实30岁到40岁是一个人职业发展的黄金阶段，一定要在业务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。

不断奔跑，你就知道学习的意义所在！

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！