‘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. }

结语

  • 现在随着短视频，抖音，快手的流行NDK模块开发也显得越发重要，需要这块人才的企业也越来越多，随之学习这块的人也变多了，音视频的开发，往往是比较难的，而这个比较难的技术就是NDK里面的技术。
  • 音视频/高清大图片/人工智能/直播/抖音等等这年与用户最紧密，与我们生活最相关的技术一直都在寻找最终的技术落地平台，以前是windows系统，而现在则是移动系统了，移动系统中又是以Android占比绝大部分为前提，所以AndroidNDK技术已经是我们必备技能了。
  • 要学习好NDK，其中的关于C/C++，jni，Linux基础都是需要学习的，除此之外，音视频的编解码技术，流媒体协议，ffmpeg这些都是音视频开发必备技能，而且
  • OpenCV/OpenGl/这些又是图像处理必备知识，下面这些我都是当年自己搜集的资料和做的一些图，因为当年我就感觉视频这块会是一个大的趋势。所以提前做了一些准备。现在拿出来分享给大家。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

的编解码技术，流媒体协议，ffmpeg这些都是音视频开发必备技能，而且

  • OpenCV/OpenGl/这些又是图像处理必备知识，下面这些我都是当年自己搜集的资料和做的一些图，因为当年我就感觉视频这块会是一个大的趋势。所以提前做了一些准备。现在拿出来分享给大家。

[外链图片转存中…(img-ccKmJges-1714513389628)]

[外链图片转存中…(img-1CCVsl2v-1714513389629)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

# react native # react.js # javascript
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

【OpenHarmony】startup_init 模块

startup_init模块是OpenHarmony系统的用户态启动入口(pid=1)，负责从内核引导到系统服务拉起的全流程管理。该模块采用分阶段设计：第一阶段完成设备节点创建和关键分区挂载，第二阶段实现参数服务、配置加载和服务管理。核心功能包括服务生命周期管理（启动/停止/重启）、配置驱动的命令执行机制，以及崩溃恢复等容错处理。模块通过.cfg/JSON配置文件定义jobs和服务，采用状态机模式

avatar 开源鸿蒙跨平台开发者社区

Vue Native多分支迭代，Vue跨端原生生态迎来革新

Vue Native生态在2025-2026年迎来重大革新，呈现双轨并行发展：传统基于React Native架构的原版持续维护优化，社区推出兼容Vue3的衍生版本；同时字节跳动推出全新高性能方案Vue Lynx，采用双线程架构和原生渲染，完全兼容Vue3语法，性能对标Flutter。当前Vue原生跨端生态已分化为轻量化兼容和高性能原生两条技术路线，开发者可根据项目需求选择：新项目推荐Vue Ly

avatar 开源鸿蒙跨平台开发者社区

Flutter Dark Mode 在 OpenHarmony 系统中的适配实践

本文分享了在OpenHarmony系统中适配Flutter深色模式的实践经验。作者最初低估了适配难度，实际遇到页面不更新、组件颜色异常、状态栏不一致等问题。解决方案包括：拆分明暗主题、避免硬编码颜色、监听系统亮度变化、适配状态栏和图片资源、使用Provider管理主题状态等。文章强调全局颜色管理和统一规范的重要性，建议所有颜色通过Theme管理，图标区分明暗资源，页面背景统一配置。最终实现了稳定的

avatar 开源鸿蒙跨平台开发者社区