使用類而不是無狀態的功能組件 - 反應本機

我是新的反應原生。我已經使用了功能組件，而不是使用正常工作的類。在這裏，我不能使用構造函數，狀態，生命週期方法等。所以我想創建一個類而不是函數，但沒有運氣。使用類而不是無狀態的功能組件 - 反應本機

功能部件（index.android.js）

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    Button, 
    View 
} from 'react-native'; 

import { 
    TabNavigator 
} from 'react-navigation'; 

import MyHomeScreen from './MyHomeScreen'; 
import MyNotificationsScreen from './MyNotificationsScreen'; 

const TabNavigation = TabNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    Notifications: { 
    screen: MyNotificationsScreen, 
    }, 
}, { 
    tabBarOptions: { 
    activeTintColor: '#e91e63', 
    }, 
}); 

AppRegistry.registerComponent('TabNavigation',() => TabNavigation);

MyHomeScreen.js

export default class MyHomeScreen extends React.Component { 
    static navigationOptions = { 
    tabBarLabel: 'Home', 
    tabBarIcon: ({ tintColor }) => (
     <Image 
     source={require('./chats-icon.png')} 
     /> 
    ), 
    }; 

    render() { 
    return (
     <Button 
     onPress={() => this.props.navigation.navigate('Notifications')} 
     title="Go to notifications" 
     /> 
    ); 
    } 
}

MyNotificationsScreen.js

export default class MyNotificationsScreen extends React.Component { 
    static navigationOptions = { 
    tabBarLabel: 'Notifications', 
    tabBarIcon: ({ tintColor }) => (
     <Image 
     source={require('./notif-icon.png')} 
     /> 
    ), 
    }; 

    render() { 
    return (
     <Button 
     onPress={() => this.props.navigation.goBack()} 
     title="Go back home" 
     /> 
    ); 
    } 
}

使用類：我想用類，如下所示。我如何使它在像上面那樣名爲TabNavigation的功能組件中工作？

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    Button, 
    View 
} from 'react-native'; 

import { 
    TabNavigator 
} from 'react-navigation'; 

import MyHomeScreen from './MyHomeScreen'; 
import MyNotificationsScreen from './MyNotificationsScreen';  

export default class TabNavigation extends Component { 

    render() { 
    return (
     <View> 
     //what to do here 
     </View> 
    ); 
    } 
}

來源

2017-05-28 Amrita Stha

如果要在最高級別呈現TabNavigation，那麼執行此操作的方式與第一個示例中的相同。 TabNavigator()構造一個組件。

你的使用情況似乎並沒有從你的問題不清楚，但如果你想在頂層的一類，你可以在一個類包裝TabNavigation：

// ... 
render() { 
    return (
    <TabNavigation /> 
); 
}

來源

2017-10-02 15:40:28

使用類而不是無狀態的功能組件 - 反應本機

回答

相關問題