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

Question

我正在尝试使用 React-Native-Draggable-View 编写一些代码，但我想要的示例是以“类”形式编写的，而我以“Hooks/Functional”形式编写所有内容。这是以类格式编写的代码的原始部分。当我尝试自己转换它时，我会产生一个错误。

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};