首页 > 代码库 > React Native细节知识点总结<一>

React Native细节知识点总结<一>

2024-10-06 03:20:39   215人阅读

1.propTypes:

 static propTypes = {
        name:PropTypes.string,
        ID:PropTypes.number.isRequired,
    }

‘isRequired‘ 表示如果不传递这个属性，那么开发阶段中，系统会出现警告，让我们对其进行属性确认，也就是说是否为必须属性。

1>属性为任何类型:

React.PropTypes.any

2>属性是否是 JavaScript 基本类型:

 React.PropTypes.array;
 React.PropTypes.func;
 React.PropTypes.bool;
 React.PropTypes.number;
 React.PropTypes.object;
 React.PropTypes.string;
 React.PropTypes.style;

3>属性是某个 React 元素:

 React.PropTypes.element;

4>属性为几个特定的值:

 React.PropTypes.oneOf([‘value1‘, ‘value2‘])

5>属性为指定类型中的一个:

 React.PropTypes.oneOfType([
 React.PropTypes.node,
 React.PropTypes.number,
 React.PropTypes.string
 ])

6>属性为可渲染的节点:

React.PropTypes.node;

7>属性为某个指定类的实例:

React.PropTypes.instanceOf(NameOfClass);

8>属性为指定类型的数组:

React.PropTypes.arrayOf(React.PropTypes.string)

9>属性有一个指定的成员对象:

React.PropTypes..objectOf(React.PropTypes.number)

10>属性是一个指定构成方式的对象:

React.PropTypes.shape({
        color:React.PropTypes.stirng,
        fontSize:React.PropTypes.number
    })

2.属性默认值（当我们没有传递属性的时候使用）:

static defaultProps = {
        name:‘思思‘
    };

3.react-native-pull使用网络请求:

 // 网络请求
    fetchData(resolve) {
        setTimeout(() => {
            fetch(‘http://guangdiu.com/api/gethots.php‘)
                .then((response) => response.json())
                .then((responseData) => {
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(responseData.data),
                        loaded:true,
                    });
                    if (resolve !== undefined){
                        setTimeout(() => {
                            resolve();  // 关闭动画
                        }, 1000);
                    }
                })
                .done();
        });
    }

4.DeviceEventEmitter的使用:

注意: 不管是在发送还是接收页面都需要引入DeviceEventEmitter.

// 导入
import {DeviceEventEmitter} from ‘react-native‘;

// 接收通知
 componentDidMount(){
    this.listener = RCTDeviceEventEmitter.addListener(‘通知名称‘,(value)=>{
      // 接受到通知后的处理
    });
  }

componentWillUnmount(){
    // 移除 一定要写
    this.listener.remove();
  }

// 发通知
RCTDeviceEventEmitter.emit(‘通知名称‘,value);

5.处理根据服务器返回数据处理显示视图:

注意push需要给子视图设置Key值...

render() {
        var views = [];
        if (this.props.fileListData.length <= 0) {
            views.push(// 设置key消除警告
                <View key={‘1‘}> 
                </View>
            );
        } else {
            views.push(
                <View style={styles.container} key={‘1‘}>
                    <Text style={styles.textTipStyle}>
                        附件列表: 
                    </Text>
                    <View style = {styles.fileListContainerStyle}>
                        {this.renderFileListView()}
                    </View>
                </View>
            );
        }
        return (
            <View>
                {views}
            </View>
        );
    }

6.设置背景透明:

backgroundColor:‘transparent‘,或者backgroundColor:‘rgba(0,0,0,0)‘,

 

7.取得文件扩展名:

 // 判断后缀名
    var fileName = rowData.name;
    console.log(fileName);
    var index1 = fileName.lastIndexOf(".");   
    var index2 = fileName.length;
    var suffixStr = fileName.substring(index1,index2);//后缀名  
    console.log(suffixStr);

8.ListView使用:

return (
      <ListView
        initialListSize={1}
        dataSource={dataSource}
        renderRow={this.renderItem}
        style={styles.listView}
        onEndReached={() => this.onEndReached(typeId)}
        onEndReachedThreshold={10}
        renderFooter={this.renderFooter}
        refreshControl={
          <RefreshControl
            style={styles.refreshControlBase}
            refreshing={read.isRefreshing}
            onRefresh={() => this.onRefresh(typeId)}
            title="Loading..."
            colors={[‘#ffaa66cc‘, ‘#ff00ddff‘, ‘#ffffbb33‘, ‘#ffff4444‘]}
          />
        }
      />

9.FlatList使用:

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

renderData() {
        return (
            <View style={styles.container}>
                <AnimatedFlatList
                    style={{backgroundColor: ‘white‘}}
                    data={this.state.dataArray}
                    renderItem={this.renderItemView.bind(this)}
                    onEndReached={this.loadMoreData.bind(this)}
                    onRefresh={this.onRefresh.bind(this)}
                    refreshing={this.state.refreshing}
                    ListFooterComponent={this.renderFooter.bind(this)}
                    onEndReachedThreshold={60}
                    keyExtractor={(item,index)=>item.key=index}/>
                 <Toast ref="toast" position=‘top‘/>
            </View>
        );
    }

10.循环遍历数组方式:

this.state.typeIds.map((typeId) => {
  // 数据处理
});
for (var i = 0; i < this.props.fileListData.length; i++) {
   // 数据处理
}
// for in    注意index是下标,不是元素
for (var index in data.orgUsersBeanList) {
  // 数据处理
}
// for  of   value是元素值
for (var value of data.orgUsersBeanList) {

}

11.监听Android的返回按钮点击:

componentWillMount() {
        BackHandler.addEventListener(‘hardwareBackPress‘, this.onBackAndroid);
        this.getUserInfo();
    }

    componentWillUnmount() {
        BackHandler.removeEventListener(‘hardwareBackPress‘, this.onBackAndroid);
    }

    onBackAndroid = () => {
        BackHandler.exitApp();
        return true;
    }

12.ref的使用:

ref 接受值为string类型的参数或者一个函数function.

<WebView
   ref={(ref) => {
   this.webview = ref;
 }}
/>

只有在组件的render方法被调用时，ref才会被调用，组件才会返回ref。如果你在调用this.refs.xx时render方法还没被调用，那么你得到的是undefined。 
心得：ref属性在开发中使用频率很高，使用它你可以获取到任何你想要获取的组件的对象，有个这个对象你就可以灵活地做很多事情，比如：读写对象的变量，甚至调用对象的函数。

13.让组件做到局部刷新setNativeProps :

不使用state或是props。 
setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ，则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。

buttonPressed() { //当按钮按下的时候执行此函数
  let textInputValue = http://www.mamicode.com/‘yuanmenglong‘;

  this.setState({textInputValue});

  //修改文本输入框的属性值
  this.refs.textInputRefer.setNativeProps({
        editable:false
   });

  this.refs.text2.setNativeProps({
       style:{
           color:‘blue‘,
           fontSize:30
            }
   });
        //使文本输入框变为不可编辑
    }
}
render(
<View style={styles.container}>
        <Text style={styles.buttonStyle} onPress={this.buttonPressed}>
                    按我
         </Text>
         <Text style={styles.textPromptStyle} ref="text2">
                    文字提示
          </Text>
          <View>
                <TextInput style={styles.textInputStyle}
                               ref="textInputRefer"
                               value={this.state.textInputValue}
                               onChangeText={(textInputValue)=>this.setState({textInputValue})}
                    />
</View>
);

14....this.props:

render() {
    return <Category {...this.props} />;
}

获取来自父组件的属性，再传递给Category这个子组件.

 

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Courier New"; color: #333333; background-color: #f5f5f5 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Arial; color: #333333; background-color: #ffffff } span.s1 { }</style>

React Native细节知识点总结<一>


联系
我们