时间戳

首页 > 解决方案 > 导航到新视图

react-native - 导航到新视图

问题描述

如何正确导航到新视图？

应用程序：

我希望在从 StackNavigator 中选择一个按钮后打开一个新屏幕，该屏幕将覆盖整个应用程序。我不想看到 TabNavigator 和 StackNavigator。

在新窗口中，我希望它是带有返回按钮的 NavBar

我正在观看的所有教程都显示了如何在屏幕之间切换，但我找不到上述情况。

我想从主应用程序打开一个新窗口，然后返回它

编辑：

const TopNavTabs = TabNavigator({
  General: { screen: General },
  Help: { screen: Help },
  Tips: { screen: Tips },
}
});

export const Navigation = StackNavigator(
  {
    Tab: { screen: TopNavTabs },
    Article: { screen: Article },
  }
);

export default class App extends Component{

  render(){
      return(
          <View>
            <View>
              <Navigation navigation={this.props.navigation} />
            </View>
            <View>
              <View>
                <MCIcon name="account"/>
              </View>
              <View>
                <MIcon name="create" onPress={() => this.props.navigation.navigate('Article')} />
              </View>
              <View>
                <FAIcon name="hashtag" />  
              </View>
              <View>
                <FAIcon name="search" />
              </View>
            </View>
          </View>
      )
  }
}

标签： react-nativereact-navigation

解决方案

TabNavigator像这样添加StackNavigator：

const TopNavTabs = TabNavigator(
  {
   General: { screen: General },
      Help: { screen: Help },
      Tips: { screen: Tips },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

    export const Navigation = StackNavigator(
      {
        Tab: { screen: TopNavTabs },
        Article: { screen: Article },
      }
    );



    export default class App extends Component{

      render(){
          return(

                  <Navigation  />

          )
      }
    }

推荐阅读