使用类而不是无状态的功能组件 - 反应本机

我是新的反应原生。我已经使用了功能组件，而不是使用正常工作的类。在这里，我不能使用构造函数，状态，生命周期方法等。所以我想创建一个类而不是函数，但没有运气。使用类而不是无状态的功能组件 - 反应本机

功能部件（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

使用类而不是无状态的功能组件 - 反应本机

回答

相关问题