提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

React 技巧 记录 工作 native 填坑
2023-09-27 14:29:03 时间

http://www.cnblogs.com/shaoting/p/5934725.html  原文

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

http://www.cnblogs.com/maoyazhi/p/5644613.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

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

使用:

1
2
3
leftViewStyle:{
        width:width/4,
    },

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

使用Platform

先引入Platform:

1
2
3
4
5
6
7
8
9
10
import  {
     AppRegistry,
     StyleSheet,
     Text,
     View,
     ListView,
     Image,
     TouchableOpacity,
     Platform
} from  'react-native' ;

　　使用:

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

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

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

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

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

相关文章