Question

我想将App.js主函数转换为类

我从“ Expo”选项卡导航器应用程序模板中获得了此样本。它确实有效，但是我通常使用类作为自己的标准：

async function loadResourcesAsync() {
    await Promise.all([
        Asset.loadAsync([
            require('./assets/images/robot-dev.png'),
            require('./assets/images/robot-prod.png'),
        ]),
        Font.loadAsync({
            ...Ionicons.font,
            'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
        }),
    ]);
}

function handleLoadingError(error) {
    console.warn(error);
}

function handleFinishLoading(setLoadingComplete) {
    setLoadingComplete(true);
}

export default function App(props) {
    const [isLoadingComplete, setLoadingComplete] = React.useState(false);

    if(!isLoadingComplete && !props.skipLoadingScreen) {
        return (
            <Root>
                <AppLoading startAsync={loadResourcesAsync} onError={handleLoadingError} onFinish={() => handleFinishLoading(setLoadingComplete)}/>
            </Root>
        );
    } else {
        return (
            <View>
                {Platform.OS === 'ios' && <StatusBar barStyle="default"/>}
                {Platform.OS === 'android' && <View/>}
                <Root>
                    <AppContainer ref={navigatorRef => NavigationService.setTopLevelNavigator(navigatorRef)}/>
                </Root>
            </View>
        );
    }
}

问题是我如何才能将其他功能与课，基本上想要这样的东西：

export default class App extends React.Component {
    render() {
        if(!isLoadingComplete && !props.skipLoadingScreen) {
            return (
                <Root>
                    <AppLoading startAsync={this.loadResourcesAsync} onError={this.handleLoadingError} onFinish={this.handleFinishLoading}/>
                </Root>
            );
        } else {
            return (
                <View>
                    {Platform.OS === 'ios' && <StatusBar barStyle="default"/>}
                    {Platform.OS === 'android' && <View style={styles.statusBarUnderlay}/>}
                    <Root>
                        <AppContainer ref={navigatorRef => NavigationService.setTopLevelNavigator(navigatorRef)}/>
                    </Root>
                </View>
            );
        }
    }
}

Answer 1

我不确定是否收到您的问题...但是可能这就是您要寻找的内容

export default class App extends React.Component {
render() {

    var handleLoadingError = (error)  => {
       console.warn(error);
   }

    var  handleFinishLoading = (setLoadingComplete)  => {
       setLoadingComplete(true);
   }

    if(!isLoadingComplete && !props.skipLoadingScreen) {
        return (
            <Root>
                <AppLoading startAsync={this.loadResourcesAsync} onError={() => handleLoadingError()} onFinish={() => handleFinishLoading()}/>
            </Root>
        );
    } else {
        return (
            <View>
                {Platform.OS === 'ios' && <StatusBar barStyle="default"/>}
                {Platform.OS === 'android' && <View style={styles.statusBarUnderlay}/>}
                <Root>
                    <AppContainer ref={navigatorRef => NavigationService.setTopLevelNavigator(navigatorRef)}/>
                </Root>
            </View>
        );
    }
  }
}

将React Native函数转换为类

1 个答案: