如何从函数中打开组件反应本机答案

【问题标题】：How to open a component from a function react native如何从函数中打开组件反应本机
【发布时间】：2018-06-21 06:39:49
【问题描述】：

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

我想使用 on press 功能打开一个组件，但是当我使用 this.props.navigation.navigate('AddCustomer') 时没有得到响应？

你可以看看我的代码(https://github.com/dakshbhardwaj/Swipe/blob/master/components/Customers.js)

我是 react native 的新手。

你能帮帮我吗？

【问题讨论】：

标签： javascript android reactjs react-native

【解决方案1】：

AddCustomer 屏幕不是您导航器的一部分。您创建了一个 StackNavigator 并将其添加到 App 组件，但您没有在应用程序的任何地方使用该应用程序组件。

我不确定您要创建哪种导航，但一种选择是创建如下所示的内容。将与客户相关的所有屏幕添加到 StackNavigator，并将导航器作为屏幕添加到 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：关于您的下一个问题，请创建一个Minimal, Complete, and Verifiable example 并将其添加到您的问题中。挖掘一个项目并尝试调试它是一件耗时的事情，这可能会导致您得不到答案。

【讨论】：