6-4跳转路由

一、跳转详情页

首先新建一个详情页
配置
router.js index.js

import HomePage from '../views/HomePage';
import DetailPage from '../views/Details'
const AppNavigator = createStackNavigator(
    {
      Home: {
        screen: HomePage,
      },
      Detail:{
        screen:DetailPage  //配置
      }
    },
    {
      initialRouteName:"Home"
    }
  );

跳转

<Button title="Go to Detail"
  onPress={() => this.props.navigation.navigate('Detail')}/>

二、跳转传参

跳转页面

import React, { Component } from 'react';
import { View, Text,Button } from 'react-native';
export default class HomePage extends Component {
  render() {
    return (
      <View>
        <Text> HomePage </Text>
        <Button
          title="Go to Detail"
          onPress={this.toggleDetail}
        />
      </View>
    );
  }
  toggleDetail=()=>{
    this.props.navigation.navigate('Detail',{id:"1001"})
  }
}

接收页面

componentDidMount(){
      let id = this.props.navigation.getParam("id")
      Alert.alert(id)
  }

非Button按钮点击
加入TouchableOpacity 组件 写事件时一定要加指向

import React, { Component } from 'react';
import { View, Text,Image,StyleSheet,Dimensions,TouchableOpacity } from 'react-native';
export default class HomePage extends Component {
...
  render() {
    return (
      <View style={styles.container}>{this.state.list.map(item=>{
          return(
              <View style={styles.wrap}>
                  <TouchableOpacity onPress={()=>{this.toggleDetail(item.id)}}>
                    <Image style={{width:100,height:100}} source={{uri:item.coverImgUrl}}/>
                    <Text style={styles.name}>{item.name}</Text>
                  </TouchableOpacity>
              </View>
          )
      })}
      </View>
    );
  }
...
  toggleDetail=(id)=>{
    console.log(id)
    this.props.navigation.navigate('Detail',{id:id})
  }
}

接收是一样的方法