React Native：使用堆栈导航器触摸图像后的新屏幕答案

【问题标题】：React Native: New screen after touching image using stack navigatorReact Native：使用堆栈导航器触摸图像后的新屏幕
【发布时间】：2019-04-18 09:37:00
【问题描述】：

我正在尝试通过创建应用程序来学习 React Native。触摸图像后，我希望在当前屏幕上方放置一个新屏幕。

我想我想在onPress 之后使用StackNavigator？我已经阅读过它们，但不知道如何在我当前的代码中使用它们。有什么想法吗？？

const listView = ({name, picture}) => { 
       return (  
        <View style = {styles.item}>  
          <TouchableWithoutFeedback onPress={() => //new screen here!!}>  
            <ImageBackground source = {picture}  
                             resizeMode = 'cover'  
                             style={styles.image}>  
                <Text style={styles.text}>{name}</Text>  
            </ImageBackground>  
            </TouchableWithoutFeedback>  
        </View>  
      )  
};

如有任何问题，请在 cmets 中留下。

【问题讨论】：

标签： react-native expo stack-navigator onpress touchablewithoutfeedback

【解决方案1】：

您可以使用Createrestacknavigator.

exampleApp.js：

import React, { Component } from "react";
import {
  createStackNavigator,
  createAppContainer,
} from "react-navigation";
import Home from "./Home.js"
import Second from "./Second.js"
...
const RootStack = createStackNavigator(
  {
    Home: {
      screen: Home
    },
    Second: {
      screen: Second
    }   
  },
  {
    initialRouteName: "Home",
    headerMode: "none"
  }
);
const AppContainer = createAppContainer(RootStack);
export default AppContainer;

exampleHome.js：

 return (  
        <View style = {styles.item}>  
          <TouchableOpacity onPress={() => this.props.navigation.navigate("Second")}>  
            <ImageBackground source = {picture}  
                             resizeMode = 'cover'  
                             style={styles.image}>  
                <Text style={styles.text}>{name}</Text>  
            </ImageBackground>  
            </TouchableOpacity >  
        </View>  
      )

有关功能的更多信息，请参阅this link。

【讨论】：