预制一个＆＃34; heavy＆＃34;组件？

Question

我有一个组件，一个自定义键盘，在React Native中显示/构建大约需要1秒钟。

是否可以预先构建此组件，比如在启动时，并在需要显示时立即显示它？

Answer 1

唯一的方法就是提前渲染它。您可以通过在屏幕外显示零不透明度或translateX来轻松完成此操作，并通过更改这些属性使其可见。

示例：

const styles = StyleSheet.create({
    invisible: {
        opacity: 0,
        transform: [
            {translateX: -3000}
        ]
    }
})

const MyHeavyComponent = ({isVisible, ...props}) => {
    const visiblityStyle = isVisible ? null : styles.invisible;

    return (
        <View style={visiblityStyle}>
            ...
        </View>
    )
}