React native 如何将基于类的项目转换为基于函数的项目？

我太初学英语了。但我有一个项目是在React Native中基于类的组件中完成的。。。我想把它转换成基于函数的。 我从youtube视频学习了几天。。。但我不明白如何改变它

这是一个公司的项目，对我来说完成它似乎太难了

我所做的唯一一件事是，我添加了独立的routeNames文件，因为它位于主文件中。所以我从那里导入它

我知道我会删除诸如“this”、“this.props”、“render”之类的词。我只知道这些。但我相信只有这样做是行不通的

有人能帮我理解这一点吗

以下是主文件的某些部分：

const GlobalContext = React.createContext(null);
export class GlobalContextProvider extends React.Component {
  state = {
    JSON: '.json?cache=2',
    isDebug: true,
    currentTheme: 'light',
    isKeyboardOpen: false,
    isBottomSheetOpen: false,
    showSplash: true,
    showLoginRegister: true,
    inAction: false,
    uploading: false, // used infolder uploading section
    isUploading: false,
    userToken: {
      email: '',
      password: ''
    },
    userData: {
      name: '',
      surname: '',
      email: '',
      accountType: '',
      remaining: 0,
      quota: 0,
      corporate: '',
      apiKEY: '',
      apiURL: '',
    },
    folderData: [],
    receiptData: [],
    currentData: {},
    baseEmptyData: {
      receiptID: -1,
      processID: 0,
      receiptName: "",
      image: "",
      hasImage: 0,
      inputs: {
        companyName: '',
        fisNo: '',
        fisTarihi: '',
        vd: '',
        vdNo: ''
      },
      extra: [],
      items: [
        {
          urunAdi: '',
          tutar: '',
          kdv: ''
        }
      ]
    },

    toastRef: null,
    sheetRef: null,

    settings: {
      theme: 'light',
      maxYear: 2,
      showEmpty: false,
    }
  }

  componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  }
  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow(e) { this.setState({ isKeyboardOpen: true }); }
  _keyboardDidHide() { setTimeout(() => { this.setState({ isKeyboardOpen: false }); }, 200) }

  setBottomSheet = (val) => { this.setState({ isBottomSheetOpen: val }); }
  /* MISC BEGIN */
  Log = (...args) => { if (this.state.isDebug) { console.log(Array.prototype.slice.call(args).join(" ")); } }
  loadSettings = async (callback) => {
    try {
      const data = await AsyncStorage.getItem('settings');
      if (data !== null) {
        const jData = Object.assign({}, this.state.settings, JSON.parse(data));
        this.setState({ settings: jData, currentTheme: jData.theme }, () => {
          callback();
        });
      } else {
        await AsyncStorage.setItem('settings', JSON.stringify(this.state.settings));
        this.setState({ currentTheme: 'light' }, () => {
          callback();
        });
      }
    } catch (err) {
      this.Log('loadSettings Error => ', err);
      callback();
    }
  }
  saveSettings = async (key, value, callback) => {
    try {
      let jData = this.state.settings;
      jData[key] = value;
      this.Log(jData);
      await AsyncStorage.setItem('settings', JSON.stringify(jData));
      this.setState({ settings: jData }, () => {
        if (callback != undefined) {
          callback();
        }
      })
    } catch (err) {
      this.Log('saveSettings Error => ', err);
      if (callback != undefined) {
        callback();
      }
    }
  }

这是导航文件：

class Navigator extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() { }
  render() {
    const Stack = createStackNavigator();
    return (
      <>
        <StatusBar barStyle={'light-content'} translucent={true} backgroundColor={'transparent'} />
        <NavigationContainer>
          <Stack.Navigator screenOptions={{
            headerShown: false,
          }} >
            {this.props.global.showSplash ? (
              <Stack.Screen name="SplashScreen" component={SplashScreen} />
            ) : (
              this.props.global.showLoginRegister ? (
                <Stack.Screen name="LoginRegisterScreen" component={LoginRegister} />
              ) : (
                <>
                  <Stack.Screen name="HomeScreen" component={HomeScreen} />
                  <Stack.Screen name="FolderScreen" component={FolderScreen} initialParams={{ folderID: 0 }} />
                  <Stack.Screen name="DetailsScreen" component={DetailsScreen} initialParams={{ isNew: true, isEditable: true, folderID: 0, receiptID: 0, hasImage: true }} />
                  <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
                  <Stack.Screen name="SettingsScreen" component={SettingsScreen} />
                </>
              )
            )}
          </Stack.Navigator>
        </NavigationContainer>
      </>
    );
  }
}
export default withGlobalContext(Navigator);

类导航器扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{}
render（）{
const Stack=createStackNavigator（）；
返回(
{this.props.global.showSplash(
) : (
这个.props.global.showLoginRegister(
) : (
)
)}
);
}
}
使用GlobalContext（导航器）导出默认值；

这是：

export default class MyPlaceholderScreen extends React.Component {
        
    constructor(props){
        super(props);
    
        this.state = {
            isLoading: false,
            data: []
        };
    }

    componentDidMount() {
        this.loadData();
    }
        
    async loadData() {
        this.setState({ isLoading: true, data: 'myData' });
    }

    render() {
       <Text>{this.state.data}</Text>
    }
}

导出默认类myplaceholder.Component{
        
建造师（道具）{
超级（道具）；
    
此.state={
孤岛加载：false，
数据：[]
};
}
componentDidMount（）{
这是loadData（）；
    }
        
异步加载数据（）{
this.setState（{isLoading:true，data:'myData'}）；
    }
render（）{
{this.state.data}
    }
}

将更改为：

import React, { useState, useEffect } from 'react';
    
const MyPlaceholderScreen = (props) => {
    
    const [isLoading, setIsLoading] = useState(false);
    const [data, setData] = useState([]);

    useEffect(() => {
        loadData();
    }, []); // if passing empty array as a parameter, the function inside useEffect will run only after first render, if no parameter is passed, the function inside will run after every re-render (https://reactjs.org/docs/hooks-effect.html)
        
    const loadData = async () => {
        setIsLoading(true);
        setData('myData');
    }

    return(
        <Text>{data}</Text>
    )
}
    
export default MyPlaceholderScreen;

import React，{useState，useffect}来自“React”；
    
const myplaceholder屏幕=（道具）=>{
    
const[isLoading，setIsLoading]=useState（false）；
const[data，setData]=useState（[]）；
useffect（（）=>{
loadData（）；
}，[]）；//如果将空数组作为参数传递，则useEffect内的函数将仅在第一次渲染后运行，如果未传递任何参数，则useEffect内的函数将在每次重新渲染后运行(https://reactjs.org/docs/hooks-effect.html)
        
const loadData=async（）=>{
设置加载（真）；
setData（“myData”）；
    }
返回(
{data}
    )
}
    
导出默认占位符屏幕；

类生命周期方法，如

componentDidMount（）

在基于函数的组件中不存在，它将被

useffect（）

hook替换，有关此方面的详细信息，请访问

---

我以前发布过这个答案，但是您删除了这个问题

您好，对不起，先生。我想当你回答的时候，我只是删除了这个问题，因为我认为没有答案。因为当有答案时，如果我没有弄错的话，这个网站不允许我们删除这个问题。现在我要检查你的代码。非常感谢。是的，在我按下按钮发布答案之前，它被删除了：Dı不能用那个代码做任何事情。当我看到您发布的示例代码时，我认为这似乎很简单。但是当我看到我问的项目中的代码时，我觉得太难了：（你有没有机会看看我发布的代码，所以你可以给我一些提示…？你有什么错误？