如何从功能中打开组件React Native

Question

 <View style = {styles.container}>
           <TouchableOpacity style={styles.btn}
             onPress={() => this.props.navigation.navigate('AddCustomer') }>
             <Text style={styles.plus}>+</Text>
           </TouchableOpacity>
       </View>
     </List>

I want to open a component using the on press function, but I am getting no response when I am using this.props.navigation.navigate('AddCustomer') ?

You can look at my code( https://github.com/dakshbhardwaj/Swipe/blob/master/components/Customers.js )

I am new to the react native.

Can you help me ?

Answer 1

AddCustomer screen is not part of your navigator. You created a StackNavigator and added it to App Component but you are not using that App component anywhere in you app.

I'm not sure what sort of navigation do you want to create but one option is creating something like below. Add your customer related all screens to the StackNavigator and add that navigator as a screen to the TabNavigator .

export const CustomerStack = createStackNavigator(
  {
    Customers:{
      screen:Customers,
    },
    AddCustomer:{
      screen:AddCustomers
    }

  }
);

export default createBottomTabNavigator({
  Dashboard:{
    // ...
  },
  Customers:{
    screen: CustomerStack,
    navigationOptions:{
      tabBarLabel:'Customers',
      tabBarIcon:({tintColor}) => (
        <Icon name ="ios-people-outline" color =
          {tintColor} size = {24} />
      )
    }
  },
  Invoice:{
    // ...
  },
  TimeTracker:{
    // ...
  },
  More:{
    // ...
  }
},{
  tabBarOptions:{
    // ...
  }
})

PS: On your next question please create a Minimal, Complete, and Verifiable example and add it to your question. Digging through a project and trying to debug it is a time consuming thing and this might result for you to not get an answer.