react-native - 如何使用参考在本机反应中重新渲染特定组件？

问题描述

我必须在按下清除/关闭图标时清除或重新呈现 DatePicker 输入。但是 DatePicker 中没有明确的选项。所以我必须重新渲染特定组件（DatePicker）而不是整个 UI。

import DatePicker from 'react-native-date-ranges';

<View style={styles.row}>
    <Item rounded style={styles.inputWrap}>
        <Input placeholder='Customer Id' keyboardType="numeric" placeholderTextColor='rgba(0,0,0,0.4)' onChangeText={(text) => this.setState({customerCode: text})}/>
    </Item>
    <View style={{flex: .025}}></View>
    <Item rounded style={styles.inputWrap}>
        <Input placeholder='Invoice No' keyboardType="numeric" placeholderTextColor='rgba(0,0,0,0.4)' onChangeText={(text) => this.setState({invoiceNo: text})}/>
    </Item>
    <DatePicker
        style={ {height: 36, borderRadius: 8, borderColor: "#cccccc", borderWidth: 1,} }
        customStyles = { {
            placeholderText:{ fontSize:14 }, // placeHolder style
            headerStyle : { backgroundColor:'#007aff' },            // title container style
            headerMarkTitle : { }, // title mark style 
            headerDateTitle: { }, // title Date style
            contentInput: { fontSize:14 }, //content text container style
            contentText: {fontSize:14}, //after selected text Style
        } } // optional 
        ButtonStyle={{backgroundColor:'#007aff', borderWidth:1, borderRadius:8,marginHorizontal: 20, borderColor:'#fff'}}
        ButtonTextStyle={{color: '#fff',alignSelf:'center',padding:10, fontSize: 16}}
        centerAlign // optional text will align center or not
        allowFontScaling = {false} // optional
        markText={'Select Date'}
        ButtonText='Select'
        placeholder={'Ex: Apr 27, 2018 → Jul 10, 2018'}
        mode={'range'}
        onConfirm={(text) => {this.setState({invoiceDate: text}); console.log('invoiceDate: ', text)}}
        ref = {(ref)=> this.picker = ref}
    />
    <Icon style={{padding: 10, marginLeft: -30, marginTop: -2}} size={20} name={'md-close'} color={'red'} onPress={() => "Clear or rerender the DatePicker Input. There are no clear option in DatePicker. So i have to rerender"}/>
</View>

我是 react-native 的新手。所以，我非常需要你的帮助

标签： react-nativererender

react-native - 如何使用参考在本机反应中重新渲染特定组件？

问题描述

解决方案

推荐阅读