Javascript 如何使用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，{Component}来自'React'；
从“react native”导入{ScrollView}；
从“axios”导入axios；
从“/CarDetail”导入CarDetail；
const API_URL='1〕http://localhost:3000';
类CarList扩展组件{
州={cars:[]}；
组件willmount（）{
console.log（'Mount'）；
get（`${API\u URL}/cars`）
.then（response=>this.setState（{cars:response.data.cars}））；
}
渲染器（）{
返回此.state.cars.map（car=>
);
}
render（）{
console.log（this.state.cars）；
返回(
{this.renderCars（）}
);
}
}
导出默认卡利斯特；

这是描述物品的代码

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;

从“React”导入React；
从“react native”导入{Text，View，Image}；
从“react native router flux”导入{Actions}；
从“../material/Card”导入卡片；
从“../material/CardSection”导入CardSection；
const CarDetail=（{car}）=>{
常量imageURI=https://yt3.ggpht.com/-HwO-2lhD4Co/AAAAAAAAAAI/AAAAAAAAAAA/p9WjzQD2-hU/s900-c-k-no-mo-rj-c0xffffff/photo.jpg';
const{make，model}=汽车；
函数showCarDetail（）{
Actions.showCar（）；
}
返回(
{make}
{model}
);
};
常量样式={
标题样式：{
flexDirection:'列'，
为内容辩护：“周围的空间”
},
headerTextStyle：{
尺寸：18
},
图像样式：{
身高：50，
宽度：50
},
集装箱运输方式：{
为内容辩护：“中心”，
对齐项目：“居中”，
边缘左：10，
marginRight:10
},
图片样式：{
身高：300，
弹性：1，
宽度：空
}
};
导出默认卡片；

---

我怎样才能更改我的代码呢？谁能给我举个例子吗？

你必须使用某种导航组件。有很多，但我个人使用的是内置在React Native中的

是的，我以前做过。但是当我显示列表时，页面将自动指向该详细信息页面，这不是我想要的。我仍然希望列表页面可以像以前一样显示，而详细信息页面只有在我单击文本后才会显示