如何使用React Native導航頁面

我有用於列出項目的組件，我想添加可以轉到不同頁面的功能，並且該頁面包含有關該項目的詳細信息。目前，這是我列出項目的代碼。如何使用React Native導航頁面

import React, { Component } from 'react'; 
import { ScrollView } from 'react-native'; 
import axios from 'axios'; 
import CarDetail from './CarDetail'; 

const API_URL = 'http://localhost:3000'; 

class CarList extends Component { 
    state = { cars: [] }; 

    componentWillMount() { 
    console.log('Mount'); 
    axios.get(`${API_URL}/cars`) 
    .then(response => this.setState({ cars: response.data.cars })); 
    } 

    renderCars() { 
    return this.state.cars.map(car => <CarDetail key={car.id} car={car} /> 
    ); 
    } 

    render() { 
    console.log(this.state.cars); 
    return (
     <ScrollView> 
     {this.renderCars()} 
     </ScrollView> 
    ); 
    } 
} 

export default CarList;

，這是描述項目

import React from 'react'; 
import { Text, View, Image } from 'react-native'; 
import { Actions } from 'react-native-router-flux'; 
import Card from '../material/Card'; 
import CardSection from '../material/CardSection'; 


const CarDetail = ({ car }) => { 
    const imageURI = 'https://yt3.ggpht.com/-HwO-2lhD4Co/AAAAAAAAAAI/AAAAAAAAAAA/p9WjzQD2-hU/s900-c-k-no-mo-rj-c0xffffff/photo.jpg'; 
    const { make, model } = car; 
    function showCarDetail() { 
    Actions.showCar(); 
    } 
    return (
     <Card> 
     <CardSection> 
     <View style={styles.containerStyle}> 
     <Image 
     style={styles.imageStyle} 
     source={{ uri: imageURI }} 
     /> 
     </View> 
     <View style={styles.headContentStyle}> 
     <Text 
     style={styles.headerTextStyle} 
     onPress={showCarDetail()} 
     > 
     {make} 
     </Text> 
     <Text>{model}</Text> 
     </View> 
     </CardSection> 
     <CardSection> 
      <Image 
      style={styles.picStyle} 
      source={require('./car.jpg')} 
      /> 
     </CardSection> 
     </Card> 
    ); 
}; 

const styles = { 
    headContentStyle: { 
    flexDirection: 'column', 
    justifyContent: 'space-around' 
    }, 
    headerTextStyle: { 
    fontSize: 18 
    }, 
    imageStyle: { 
    height: 50, 
    width: 50 
    }, 

    containerStyle: { 
    justifyContent: 'center', 
    alignItems: 'center', 
    marginLeft: 10, 
    marginRight: 10 
    }, 

    picStyle: { 
    height: 300, 
    flex: 1, 
    width: null 
    } 
}; 

export default CarDetail;

我怎樣才能改變我的代碼，該代碼？任何人都可以給我一個例子嗎？

來源

2017-02-12 D.Kenny

你必須使用某種導航組件。這裏有很多，但我個人使用內置於React Native的那個。 https://facebook.github.io/react-native/docs/navigator.html

來源

2017-02-12 22:24:12 JacobSiegel

是的，我之前做過。但是，當我顯示列表時，頁面將自動定向到該詳細信息頁面，這不是我想要的。我仍然希望列表頁面可以像以前一樣顯示，而詳細信息頁面將只在單擊文本後顯示 –

如何使用React Native導航頁面

回答

相關問題