1

我决定使用 react-native 制作一个电影应用程序，但我在导航部分遇到了问题。我下载了 react-navigation 包，但我对如何让它在这个应用程序上工作感到困惑。

我如何在这个应用程序中使用反应导航？单击其中一个电影名称后，我需要能够进入一个空白的新屏幕。

import React, { Component } from 'react';
import {
  ListView,      
  Text,
  AppRegistry,
  View,
  StatusBar,
  Image,             
  StyleSheet,                
  TouchableOpacity,
  screen, 
  Dimensions,
} from 'react-native';


class MyFirstApp extends Component {

  componentDidMount() {
    StatusBar.setHidden(true);
  }


  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
    dataSource: ds.cloneWithRows([
  {
    title: 'Zootopia',
    image: 'https://lumiere-a.akamaihd.net/v1/images/flex_tablet_zootopia_selfie_c781d089.jpeg?region=0,0,1536,864&width=1200',
  },
  {
    title: 'Big Hero Six',
    image: 'https://static.comicvine.com/uploads/original/11/117787/4411387-9609565494-Big_h.jpg',
  },
  {
    title: 'The Jungle Book',
    image: 'http://content.wfaa.com/photo/2016/04/15/0415%20the%20jungle%20book_1460699585024_1641035_ver1.0.jpg',
  },
  {
    title: 'Frozen',
    image: 'https://lh3.googleusercontent.com/Ubuz8rG7Z05pGC15r4ztJrIoLymeUUdmy-xDCLMLV_AylFSBVCl_I3ktlGWbtQt6StcfOqgHzEzh-vvyHA=h1264',
  },
  {
    title: 'Finding Dory',
    image: 'http://assets1.ignimgs.com/2016/06/14/finding-dory-1280jpg-da8275_1280w.jpg',
  },
  {
    title: 'Finding Nemo',
    image: 'http://static.srcdn.com/wp-content/uploads/Finding-Nemo.jpg',
  },
  {
    title: 'Kubo and the Two Strings',
    image: 'https://i.ytimg.com/vi/p4-6qJzeb3A/maxresdefault.jpg',
  },
  {
    title: 'Captain America: Civil War',
    image: 'https://images.alphacoders.com/669/669681.jpg',
  },
  {
    title: 'La La Land',
    image: 'https://acastprod.blob.core.windows.net/media/v1/203ff281-40da-4fe6-9c67-ab4125cc14e4/la-la-land-585c617a5f650-ixrpbddy.jpg',
  },
  {
    title: 'The Lion King',
    image: 'http://heroichollywood.b-cdn.net/wp-content/uploads/2016/10/lion-king.jpg',
  },
      ]),

    };
  }

  render() {
    return (
      <View style={{flex: 1}}>     
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(movie) => 

          <Row
            movie={movie}
          />
     }

        />

      </View>

    );
  }
}


export default class Row extends Component {


  render({ movie, onPress } = this.props) {

    const { title, rating} = movie;
    return (

      <TouchableOpacity

        style={styles.row}

        onPress={onPress}

        activeOpacity={0.7}
      >
        <Image source={{uri: movie.image}} style={styles.imageBackground}>

          <Text style={[styles.text, styles.title]}>{title.toUpperCase()}</Text>


        </Image>
      </TouchableOpacity>
    );
  }

}


const styles = StyleSheet.create({

  row: {
    paddingBottom: 4,                   
  },

  imageBackground: {
    height: 200,        
    justifyContent: 'center',          
    alignItems: 'center',              
  },

  text: {
    color: '#fff',                    
    backgroundColor: 'transparent',    
    fontFamily: 'Avenir',             
    fontWeight: 'bold',                

    textShadowColor: '#222',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 4,
  },

  title: {
    fontSize: 22,                      
  },

  rating: {
    flexDirection: 'row',              
  },

  icon: {
    width: 22,                         
    height: 22,                       
    marginRight: 5,                    
  },

  value: {
    fontSize: 16,                   
  },
});


AppRegistry.registerComponent('MyFirstApp', () => MyFirstApp);
4

0 回答 0