如何使用React Native导航页面

Question

我有用于列出项目的组件，我想添加可以转到不同页面的功能，并且该页面包含有关该项目的详细信息。目前，这是我列出项目的代码。

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; 

我怎样才能改变我的代码，该代码？任何人都可以给我一个例子吗？

Answer 1

你必须使用某种导航组件。这里有很多，但我个人使用内置于React Native的那个。 https://facebook.github.io/react-native/docs/navigator.html