React Native工作小技巧及填坑记录

最新推荐文章于 2025-01-09 10:58:04 发布

转载最新推荐文章于 2025-01-09 10:58:04 发布 · 546 阅读

react-native 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了React Native开发中的一些实用技巧，包括解决依赖缺失问题、导入第三方库、获取屏幕尺寸、实现跨平台UI适配、颜色值设定及使用ref获取组件。

以下是本人在React Native开发工作中使用的一些小技巧,记录一下。

http://www.cnblogs.com/shaoting/p/6491978.html

1.从网络上拉取下来的react Native缺少React和React Native库.

终端

1. cd 项目根目录

2. npm install

3. 完成之后,在根目录中会出现node_modules文件夹(和package.json同级目录).OK.接下来使用Xcode再次打开就好了.

2.如何导入第三方库.

1.cd 项目根目录

2.npm i 库名 --save

如: npm i react-native-tab-navigator --save 导入了react-native-tab-navigator这个库

3.获取屏幕的宽和高

使用Dimensions

 
         var 
         Dimensions = require(
         'Dimensions'
         );
        
         var 
         {width,height} = Dimensions.get(
         'window'
         );

使用:

 
         leftViewStyle:{
        
         width:width/4,
        
         },

4.根据不同的平台设置不同的效果

使用Platform

先引入Platform:

 
         import 
         {
        
         AppRegistry,
        
         StyleSheet,
        
         Text,
        
         View,
        
         ListView,
        
         Image,
        
         TouchableOpacity,
        
         Platform
        
         } from 
         'react-native'
         ;

　　使用:

 
         iconStyle:{
        
         width: Platform.OS === 
         'ios' 
         ? 30 : 25,
        
         height:Platform.OS === 
         'ios' 
         ? 30 : 25
        
         },

　5.颜色值使用RGB三色值.　　

 
         backgroundColor:
         'rgba(234,234,234,1.0)'
         ,

6.ref的使用,可以获取上下文的组件.

 
         <TextInput ref=
         "tel" 
         style={styles.telInputStyle} placeholder = {
         '