如何使用 react-native-navigation 添加新屏幕（使用pepperoni-starter-pack）？答案

【问题标题】：How do I add a new screen with react-native-navigation (using pepperoni-starter-pack)?如何使用 react-native-navigation 添加新屏幕（使用pepperoni-starter-pack）？
【发布时间】：2017-04-24 08:49:49
【问题描述】：

我正在尝试使用pepperoni-app-kit 制作移动应用程序原型，该应用程序使用react-navigation。但是我发现自己无法向应用程序添加新屏幕；就好像屏幕不存在一样。

这是它如何使用react-navigation。我添加了Pizza 屏幕。

import {TabNavigator, StackNavigator} from 'react-navigation'

export const MainScreenNavigator = TabNavigator({
  Pizza: {screen: PizzaLocator},
  Counter: {screen: CounterViewContainer},
  Color: {screen: ColorViewContainer},
}, {
  tabBarOptions: {
    ...Platform.select({
      android: {
        activeTintColor: activeColor,
        indicatorStyle: {backgroundColor: activeColor},
        style: {backgroundColor: headerColor}
      }
    })
  }
})

对于这个新屏幕，我模仿了入门包中的其他屏幕：

class PizzaLocator extends Component {
  static displayName = "PizzaLocator"

  static navigationOptions = {
    title: 'Pizza',
    tabBarLabel: "Pizza",
    tabBar: () => ({
      icon: (props) => (
        <Icon name='pizza' size={24} color="Yellow" />
      )
    }),
    // TODO: move this into global config?
    header: {
      tintColor: 'white',
      style: { backgroundColor: '#39babd' }
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>{"It's dangerous to go alone; take this map."}</Text>
      </View>
    )
  }
}

我也尝试将PizzaLocator 包装在一个琐碎的PizzaLocatorContainer 中（他们所做的最多的是connect(Thing)），就像他们在其他屏幕中所做的那样，但这并没有改变任何事情。

我错过了什么？ Pepperoni 使用react-navigation 的方式是非标准的吗？谢谢！

【问题讨论】：

您已在 [react-native-navigation] 下标记了此问题，但您正在使用 [react-navigation] - 请更改

标签： react-native react-native-navigation

【解决方案1】：

在终端工具中，cd到pepperoni的项目，输入命令：yarn add react-navigation，然后执行：react-native run-ios

【讨论】：