如何使用 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