React Native: новый экран после касания изображения с помощью стекового навигатора - PullRequest
Новая
       103

React Native: новый экран после касания изображения с помощью стекового навигатора

0 голосов
/ 18 апреля 2019

Я пытаюсь выучить React Native, создав приложение.После того, как я коснусь изображения, я хочу, чтобы новый экран был помещен поверх текущего экрана.

Я думаю, что хочу использовать StackNavigator после onPress?Я читал о них, но не знаю, как использовать их с моим текущим кодом.Любые идеи ?? 

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>  
      )  
};

Пожалуйста, оставляйте любые вопросы, которые вам нужны в комментариях.

1 Ответ

0 голосов
/ 18 апреля 2019

Вы можете использовать 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>  
      )

См. эту ссылку для получения дополнительной информации о функциях.

...