使用react-native-camera组件扫描二维码后日期显示不正常 about react-native-common-date-picker HOT 11 CLOSED

<DatePicker confirm={date => { this.confirmDate(date); }} cancel={() => this.dateClear()} cancelText={cancelText} toolBarCancelStyle={{color:'#158EE9',}} confirmText={okText} toolBarConfirmStyle={{color:'#158EE9',}} monthDisplayMode = {'en-long'} maxDate={maxDate} defaultDate={new Date()} // onValueChange={date => this.onDateChange(date)} />

可以提供其他信息吗？比如是在同一个界面触发的，还是跳转到扫码界面返回后，日期组件的日期显示发生变化？看这个代码没有发现有什么问题

from react-native-common-date-picker.

只要扫码过后，不管是不是相同页面，日期组件的可选日期就会有部分没有显示，但还是可以滑动选择得到日期

from react-native-common-date-picker.

只要扫码过后，不管是不是相同页面，日期组件的可选日期就会有部分没有显示，但还是可以滑动选择得到日期

感谢提供详细信息。我今晚回去试试扫码看是否能够重现这个问题，如果有问题的话，会尽快修改发一个补丁版本。

from react-native-common-date-picker.

@Adaniuaaa 尝试了react-native-camera，无法重现你说的问题。如果方便，可以提供一下你的demo代码。或者，是不是你当前页面做的其他特殊处理导致的问题？

from react-native-common-date-picker.

是Android
scan page:
`import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Animated, Easing } from 'react-native';
import { RNCamera } from 'react-native-camera';

class ScanScreen extends Component {
constructor(props) {
super(props);
this.state = {
moveAnim: new Animated.Value(0)
};
}

componentDidMount() {
    this.startAnimation();
}

startAnimation = () => {
    this.state.moveAnim.setValue(0);
    Animated.timing(
        this.state.moveAnim,
        {
            toValue: -200,
            duration: 1500,
            easing: Easing.linear
        }
    ).start(() => this.startAnimation());
};

onBarCodeRead = (result) => {
    this.camera.stopRecording();
    if (this.props.scanHandler) {
        this.props.scanHandler(result.data);
    }
};

render() {
    return (
        <View style={styles.container}>
            {this.props.type === 'QR' &&
                <RNCamera
                    ref={ref => {
                        this.camera = ref;
                    }}
                    autoFocus={RNCamera.Constants.AutoFocus.on}
                    style={styles.preview}
                    type={RNCamera.Constants.Type.back}
                    googleVisionBarcodeType={RNCamera.Constants.GoogleVisionBarcodeDetection.BarcodeType.QR_CODE}
                    flashMode={RNCamera.Constants.FlashMode.auto}
                    onBarCodeRead={(e) => this.onBarCodeRead(e)}
                >
                    <View style={styles.rectangleContainer}>
                        <View style={styles.rectangle}/>
                        <Animated.View style={[
                            styles.border,
                            {transform: [{translateY: this.state.moveAnim}]}]}/>
                        <Text style={styles.rectangleText}>{'Scan QR code'}</Text>
                    </View>
                </RNCamera>
            }
            {this.props.type !== 'QR' && 
                <RNCamera
                    ref={ref => {
                        this.camera = ref;
                    }}
                    autoFocus={RNCamera.Constants.AutoFocus.on}
                    style={styles.preview}
                    type={RNCamera.Constants.Type.back}
                    flashMode={RNCamera.Constants.FlashMode.on}
                    onBarCodeRead={this.onBarCodeRead}
                >
                    <View style={styles.rectangleContainer}>
                        <View style={styles.rectangle}/>
                        <Animated.View style={[
                            styles.border,
                            {transform: [{translateY: this.state.moveAnim}]}]}/>
                        <Text style={styles.rectangleText}>{'Scan'}</Text>
                    </View>
                </RNCamera>
            }
        </View>
    );
}

}

export default ScanScreen;

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row'
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
rectangleContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent'
},
rectangle: {
height: 200,
width: 200,
borderWidth: 1,
borderColor: '#00FF00',
backgroundColor: 'transparent'
},
rectangleText: {
flex: 0,
color: '#fff',
marginTop: 10
},
border: {
flex: 0,
width: 200,
height: 2,
backgroundColor: '#00FF00',
}
});`

date page:
<Modal visible={this.state.visible} animationType={"slide"} onRequestClose={() => this.cancel()}> <DatePicker confirm={date => { this.confirmDate(date); }} cancel={() => this.dateClear()} cancelText={'clear'} toolBarCancelStyle={{color:'#158EE9',}} confirmText={'ok'} toolBarConfirmStyle={{color:'#158EE9',}} monthDisplayMode = {'en-long'} maxDate={'2026-12-31'} defaultDate={new Date()} // onValueChange={date => this.onDateChange(date)} /> </Modal>

from react-native-common-date-picker.

是FlatList的问题吗？很奇怪

from react-native-common-date-picker.

@Adaniuaaa 你这个是，从日期所在的页面，进入到扫码页面，再返回到日期页面？扫码成功返回日期页面有没有做什么setState操作，我看你代码有一个 this.props.scanHandler(result.data);操作。

from react-native-common-date-picker.

@Adaniuaaa 你这个是，从日期所在的页面，进入到扫码页面，再返回到日期页面？扫码成功返回日期页面有没有做什么setState操作，我看你代码有一个 this.props.scanHandler(result.data);操作。

日期页面和扫码页面是分开的，没有数据关联，我只是去扫码页面做扫码操作，然后去日期页面就会看到日期显示不全

from react-native-common-date-picker.

@Adaniuaaa 我现在身边没有Android真机，我用Android模拟器没有问

题

from react-native-common-date-picker.

@Adaniuaaa 我现在身边没有Android真机，我用Android模拟器没有问 题

也是先进入日期页面，然后进去扫码，返回到日期页面，点击按钮让modal显示日期

from react-native-common-date-picker.

@Adaniuaaa 你可以用这个demo本地跑真机看看哈，如果能够复现，你可以修改一下代码提交一个demo或代码段。demo链接🔗

from react-native-common-date-picker.