0

在我的应用程序中，我有一个函数，它每 2 秒调用一次蓝牙命令，通过 setInterval 函数询问设备的当前温度。

蓝牙响应由监控功能给出。我为此使用 react native-ble-plx 库。我对这个过程没有任何问题。

温度通过一个属性返回，该属性通过动作文件中的 redux 调度。但是当我将函数“调度”（通过 redux）到我的屏幕时，我有一个短暂的中断，这会导致延迟/生涩的行为。就我而言，我有一个滑动解锁按钮，在我的设备上调用调度时，触摸操作被中断，变得不直观和烦人。很难解释这个问题，但我的问题很简单，我如何设置 react-redux 不滞后，或者不中断 redux 调度上的当前用户交互？

我的应用程序基于此项目结构（用于带有 Ble 的 react-redux）：https ://github.com/momolarson/BLEServiceDiscovery

环境：反应原生：0.63.3

反应原生 ble-plx：2.0.2

反应减少：7.2.1

这是我的应用程序的伪代码（代码更长，但我通过删除它们排除了所有其他代码）：

HomeScreen.js

import stuff[...]

class HomeScreen extends Component {

    componentDidMount() {
        this.timer = setInterval(() => {
            this.props.readTemp();
        }, 2000);
    }

    render() {
        const { value } = this.state
        
        return (
            <>
            <ScrollView>
                <Text>{this.props.temperatture}"></Text>
                <Slide2Unlock/>
            </ScrollView>
            </>
        );
    }
}

function mapStateToProps(state) {
    return {
        temperature: state.temperature,
    };
}


const mapDispatchToProps = dispatch => ({
    readTemp: () => bluetooth.readTemp(),
})


export default connect(mapStateToProps, mapDispatchToProps())(HomeScreen);

redux 的动作文件：actionBt.js（我的文件是基于这个https://github.com/momolarson/BLEServiceDiscovery/blob/master/actions/index.js）

[...]
device.monitorCharacteristicForService(
    characteristicData.serviceUUID,
    characteristicData.uuid,
    (error, characteristic) => {
        if (characteristic != null && characteristic.value != null) {
            dispatch(formatTemperature(characteristic.value));
        }
    },
);

感谢您的帮助

更新 1

我制作了我的应用程序的一个特定版本，没有蓝牙，只有解锁模块的幻灯片和一个带有 setInterval 的观察者，当状态被调度时，仍然有一个滞后的行为。我只用按钮完成了测试，当我点击然后通过调度显示值时，它仍然是同样的麻烦。

这是我的测试代码 index.js（redux 操作文件）

export const readTemp = () => {
    return (dispatch, getState, DeviceManager) => {
        const state = getState();
        console.log("READ TEMP");
        dispatch(temperatureSensor( Math.random(0,9) ))
    }
}

function BLEservices(BLEServices) {

    setInterval(() => {
        BLEServices.readTemp();
    }, 2500);

    return (
        <SafeAreaView style={styles.container}>
            <Slider
                childrenContainer={{  }}
                onEndReached={() => {
                    console.log('REACHED')
                }}
                containerStyle={{
                    height:40,
                    margin: 8,
                    backgroundColor: "#EEEEEE",
                    overflow: 'hidden',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: '50%',
                }}
                sliderElement={
                    <Text style={{color:"#FFF"}}>TEST</Text>
                }
            >
                <Text style={{color: "#D5BD9E"}}>unlock</Text>
            </Slider>

            <Text>Temperature: {BLEServices.temperatureSensor}</Text>

        </SafeAreaView>
    );
}

感谢您的建议和帮助

更新 2

找到解决方案，请参阅下面的答案。问题是调度中的 var 用户类型以及由于之前我在应用程序上进行的测试而不清理它们而产生的一些副作用。

4

1 回答 1

0

我通过找到包含对象的多个 var 解决了我的问题。我有一个包含四个属性的 var，我更新并使用其中一个。这个对象是由我的观察者更新的。当我调度对象以获取该对象的一部分时，我必须读取整个对象，而这个对象已由我的 watchern 完全更新，这会导致渲染延迟。所以我把它分开了，只更新每个var。我做过的另一件事是，我将界面元素拆分为多个组件，以前，我在一个屏幕上有很多代码，因为我不需要在其他地方重用它们。

于 2020-12-01T15:43:54.953 回答