将 React-Native-Draggable-View 从 Class 转换为 Hooks

Question

我正在尝试使用 React-Native-Draggable-View 编写一些代码，但是按照我想要的方式编写的示例是以“class”形式编写的，而我将所有内容都编写为“Hooks/Functional" 形式。这是以 class 格式编写的代码的原始部分。当我尝试自己转换时，出现错误。

import React, { useState, useEffect, Component }from "react";
import Drawer from 'react-native-draggable-view'
import CheckScreen from './CheckScreen'
import ListScreen from './ListScreen'

function RunningScreen({navigation}) {

...

return(

...


<Drawer
    initialDrawerSize={0.09}
    renderContainerView={() => { <View style = {{flex: 1, backgroundColor: 'red'}}/> }}
    renderDrawerView={() => { <View style = {{flex: 1, backgroundColor: 'red'}}/> }}
    renderInitDrawerView={() => {
      <View style = {{backgroundColor: '#fff', height: height*0.2}}>
        <StatusBar hidden = {true}/>
  <StatusBar hidden = {true}/>
                
    </View>
   )}
  />
    )
    }

...

export {RunningScreen}

Answer 1

试试下面的代码

import React from 'react';
import {Dimensions, StatusBar, View} from 'react-native';
import Drawer from 'react-native-draggable-view';

const {height} = Dimensions.get('window');

function RunningScreen({navigation}) {
  return (
    <Drawer
      initialDrawerSize={0.09}
      renderContainerView={() => (
        <View style={{flex: 1, backgroundColor: 'red'}} />
      )}
      renderDrawerView={() => (
        <View style={{flex: 1, backgroundColor: 'red'}} />
      )}
      renderInitDrawerView={() => (
        <View style={{backgroundColor: '#fff', height: height * 0.2}}>
          <StatusBar hidden={true} />
        </View>
      )}
    />
  );
}

export {RunningScreen};