将道具从MaterialBottomTabNavigator传递到组件

Question

我是新来的本地人。我已使用MaterialBottomTabNavigator进行导航。单击选项卡上的强文本时，它工作正常，但是主组件屏幕中有一个按钮（链接）。单击该按钮后，应转到项目组件。该按钮位于名为“查看全部”的Home组件（可触摸不透明度）中。

这是我的导航器（App.js）

import React from 'react';  
import { View } from 'react-native';  
import { createAppContainer , createStackNavigator } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';  
import Icon from 'react-native-vector-icons/Ionicons';  
import { Home , Projects , Gallery , Contact , Reviews , About }  from  './pages'; 


    const TabNavigator = createMaterialBottomTabNavigator(  
        {  
            Home: {
                 screen: Home,  
                 navigationOptions:{  
                    tabBarLabel:'Home',  
                    tabBarIcon: ({ tintColor }) => (  
                        <View>  
                            <Icon style={[{color: tintColor}]} size={25} name={'ios-home'}/>  
                        </View>),  
                } 
            },  
            Projects: { screen: Projects,      
                navigationOptions:{  
                    tabBarLabel:'Projects',  
                    tabBarIcon: ({ tintColor }) => (  
                        <View>  
                            <Icon style={[{color: tintColor}]} size={25} name={'ios-business'}/>  
                        </View>),  
                    activeColor: '#c42e00',  
                    inactiveColor: '#000',  
                    barStyle: { backgroundColor: '#fff' },  
                }  
            },  
            Gallery: { screen: Gallery,  
                navigationOptions:{  
                    tabBarLabel:'Gallery',  
                    tabBarIcon: ({ tintColor }) => (  
                        <View>  
                            <Icon style={[{color: tintColor}]} size={25} name={'ios-image'}/>  
                        </View>),  
                    activeColor: '#c42e00',  
                    inactiveColor: '#000',  
                    barStyle: { backgroundColor: '#fff' },  
                }  
            },  
            Contact: {  
                screen: Contact,  
                navigationOptions:{  
                    tabBarLabel:'Contact',  
                    tabBarIcon: ({ tintColor }) => (  
                        <View>  
                            <Icon style={[{color: tintColor}]} size={25} name={'ios-phone-portrait'}/>   
                        </View>),  
                         activeColor: '#c42e00',  
                         inactiveColor: '#000',  
                         barStyle: { backgroundColor: '#fff' },
                }  
            }, 
            Reviews: {  
                screen: Reviews,  
                navigationOptions:{  
                    tabBarLabel:'Reviews',  
                    tabBarIcon: ({ tintColor }) => (  
                        <View>  
                            <Icon style={[{color: tintColor}]} size={25} name={'ios-chatboxes'}/>  
                        </View>),  
                         activeColor: '#c42e00',  
                         inactiveColor: '#000',  
                         barStyle: { backgroundColor: '#fff' },
                }  
            }, 

            About: {  
                screen: About,   
                navigationOptions:{  
                    tabBarLabel:'About',  
                    tabBarIcon: ({ tintColor }) => (  
                        <View>  
                            <Icon style={[{color: tintColor}]} size={25} name={'ios-person'}/>    
                        </View>),  
                         activeColor: '#c42e00',  
                         inactiveColor: '#000',  
                         barStyle: { backgroundColor: '#fff' },
                }  
            },  
        },  
        {  
          initialRouteName: "Home",       
          activeColor: '#c42e00',    
          inactiveColor: '#000',  
          barStyle: { backgroundColor: '#fff' },   
        },  
    );  

    const Nav =  createAppContainer(TabNavigator);       

    export default Nav

这是我的Home组件（Home.js）

 import React, { Component } from 'react';
    import { View, Dimensions , ScrollView ,ActivityIndicator ,Image ,Text , TouchableOpacity}  from 'react-native'; 
    import axios  from 'axios';
    import { Header , Statusbar , Carousel }  from '../common'; 

    import {Nav , Projects }  from '../pages';  
    var { height, width } = Dimensions.get("window"); 


    class Home extends Component { 

       constructor(props) {

          super(props);
          this.state = {
           layout: {
               height: height,
               width: width
           },
           sliders : [],
           projects : [],
           loader : false
        }
    }


 _onPressButton(){

       this.props.navigation.navigate('Projects');     

    }

    render(){

     return(

          <View   
             style={styles.main_container}
             onLayout={this._onLayout}     >




                 <View style={styles.project_text_container}>

                    <View>

                       <Text style={styles.text1}>Our Projects</Text>


                    </View>


                    <View>

                    <TouchableOpacity onPress={this._onPressButton}>

                         <Text style={styles.text2}>See All</Text>

                    </TouchableOpacity>

                     </View>

                </View>   


             </View> 

            )

       }

    }

    const styles =   {

       main_container:{
           flex : 1,
       },

       project_text_container:{

          flexDirection : "row",
          marginLeft : 28    

       },

       text1:{

          fontSize : 20, 
          fontWeight : "bold",
       },

       text2:{

          marginLeft : 150,
          color : "#c42e00", 
          fontWeight : "bold",
          marginTop:5

       },

       image_style:{

          height : 180,  
          width : 150,

       }
    }  
    export { Home }

Answer 1

该代码几乎可以用，但是您的_onPressButton无权访问当前组件的this。您必须绑定它或使用箭头功能。

对于bind，您可以在构造函数中同时进行：

   constructor(props) {

      super(props);
      this.state = {
       layout: {
           height: height,
           width: width
       },
       sliders : [],
       projects : [],
       loader : false
    }
      this._onPressButton.bind(this)
}

或直接在onPress：

<TouchableOpacity onPress={this._onPressButton.bind(this)}>

如果您需要在绑定参数时传递参数，则只需执行

<TouchableOpacity onPress={this._onPressButton.bind(this, "params")}>

如果您不想看到代码周围的绑定（因为您必须对几乎每个函数都进行绑定），则可以使用箭头函数来自动绑定该函数。

要使用箭头功能，您只需将功能更改为：

_onPressButton = () => {

   this.props.navigation.navigate('Projects');     

}