美文网首页react-native
react native 常用技巧

react native 常用技巧

作者: mark666 | 来源:发表于2021-05-06 11:02 被阅读0次

1.设置阴影效果

引入

import {Card} from 'react-native-shadow-cards'

使用

 <Card style={{width:width - 60,marginLeft:20}} cornerRadius={5} opacity={0.3} elevation={2}>
        <View style={{ flexDirection:'row',width:width-60,justifyContent:'center'}}>
            <CartVButton url={require('../../img/bg-face.png')} onPress={this._onPressItem} label="退货单"/>
            <CartVButton url={require('../../img/bg-face.png')} onPress={this._onPressItem} label="退货单"/>
            <CartVButton url={require('../../img/bg-face.png')} onPress={this._onPressItem} label="退货单"/>
        </View>
 </Card>
示例

2.修改Flatlist数据视图不刷新解决方案

给flatlist添加属性:

handleMethod = {({viewableItems}) => 
this.handleViewableItemsChanged(viewableItems)}

3. TextInput 输入框 设置

<TextInput
              style={styles.input}
              underlineColorAndroid="transparent" // 安卓下划线颜色
              placeholder="请输入账号"
              placeholderTextColor='#858585'
              maxLength={20}
              onChangeText={(text)=>{
                this.setState({
                  showUsernameLengthAlert:false,
                  username:text
                },()=>{
                  this._disabledLoginBtn()
                })
              }}
              value={this.state.username}
              onBlur={this._accountOnBlur.bind(this)}
 secureTextEntry={!this.state.showPassword}
              maxLength={20}
            />

input:{
    paddingHorizontal:0,
    paddingVertical:0,
}

4. 滚动视图点击穿透以及不可滚动

 <ScrollView
          keyboardShouldPersistTaps="handled"
          scrollEnabled={false}
        >

5. ReactNative之解决文件导入路径问题

  • ReactNative提供了一个关键字@providesModule,可以解决文件路径问题,以后只要有这个关键字,导入组件就可以不需要路径,直接类名就好了

  • @providesModule使用

  • 在文件的顶部,嵌套一个多行注释,把@providesModule放在注释里,@providesModule后添加类名,以后就直接使用类名就能导入了。

  • 注意点,带有@providesModule的多行注释,一定要是文件的第一个多行注释。

/**
 * @providesModule Common
 */

import {
    Dimensions
} from 'react-native';

export default class Common {

    static bgColor = 'rgb(232,232,232)';

    static screenW = Dimensions.get('window').width;

    static screenH = Dimensions.get('window').height;
}
  • 外界使用Common
// 以前需要这样
// import Common from './../Common/Common'

// 现在可以直接用类名
import Common from 'Common'

6 .过滤掉数组中有重复属性的对象

const demo = [
  {id:1,value:20},
 {id:2,value:20},
 {id:1,value:40},
]
import _ from 'lodash'
const result = _.uniqBy(demo,'id')
----
 [{id:1,value:20},
 {id:2,value:20},]

7、设置随机的颜色

`#${(`#00000${(Math.random() * (1 << 24) | 0).toString(16)}`).slice(-6)}`

8. ios ScrollView 滚动条位置偏离

增加属性设置

scrollIndicatorInsets={{ right: 1 }}

相关文章

网友评论

    本文标题:react native 常用技巧

    本文链接:https://www.haomeiwen.com/subject/asifpctx.html