directorio

Integrado reaccionar navegación
Uso reaccionan navegación

Anterior describe cómo integrar existente Reaccionar proyecto nativo de iOS. Expandirse bajo éste que ponemos en un hacer una demostración, haga clic en Agregar una película para ir a la página de detalles. Reaccionar salto página nativo usando los controles de navegación de terceros recomendadas: REACT-Navegación

Integrado reaccionar navegación

De acuerdo con las directrices oficiales , el CD terminal al directorio raíz del proyecto, entre el siguiente mandato para integrar:

npm install --save react-native-navigation
npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler

En proyecto IOS, archivo PODFILE abierta, añadir RCTLinkingIOS:

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    . . . // other subspecs
    'RCTLinkingIOS',
    . . .
  ]

A continuación, ejecute el siguiente comando para instalar

pod install
En este punto, reacciona navegación integrada de productos.

Uso reaccionan navegación

Se refieren a la utilización oficial del documento , crear el archivo Navigator.js en el directorio raíz, editar el contenido de la siguiente manera:

import React from "react";
import { createStackNavigator, createAppContainer } from 'react-navigation'
import HotMovie from './src/page/HotMovie';
import MovieDetail from './src/page/MovieDetail'

const AppNavigator = createStackNavigator(
  {
    Home: HotMovie,
    Details: MovieDetail
  },
  {
    initialRouteName: "Home"
  }
)

const AppContainer = createAppContainer(AppNavigator);
export default class Navigator extends React.Component {
  render() {
    return <AppContainer />;
  }
}

HotMovie que está en una lista de películas creadas, MovieDetail para la nueva película detalla la página, como se especifica en el siguiente paso

La creación de archivos MovieDetail.js, el camino es ./src/page/MovieDetail.js, editar lo siguiente:

import React,{Component} from 'react';
import {StyleSheet,Image,Text,View} from 'react-native';

export default class MovieDetail extends Component<Props>{
	constructor(props){
		super(props)
		const { navigation } = props
    	const itemId = navigation.getParam('itemId', 'NO-ID')
    	const cover = navigation.getParam('cover')

    	this.state = {
    	  detail:null,
    	  cover:cover,
    	  itemId:itemId
    	}

    	this.fetchData = this.fetchData.bind(this)
	}
	
	componentDidMount(){
		const requrest_url = "https://movie.douban.com/j/subject_abstract?subject_id="+this.state.itemId
    	this.fetchData(requrest_url)
  	}

	fetchData(requrest_url){
    fetch(requrest_url)
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          detail:responseJson.subject
        });
      })
 	}

	render(){
		
		if (!this.state.detail) {
			return this.renderLoadingView();
		}
		const data =  this.state.detail
		const state = this.state
		return(
			<View>
			   <Text style={{fontSize:32,fontWeight:"400",padding:10}}>{data.title}</Text>
			   <View style={styles.detailView}>
			   	  <Image style={styles.thumbnail} source={{url:state.cover}}></Image>
			   	  <View style={styles.rightDetai}>
				   	  <Text>导演: {data.directors.join('/')}</Text>
			   	  	  <Text>评分：{data.rate}</Text>
			   	  	  <Text>时长：{data.duration}</Text>
			   	  	  <Text>类型：{this.state.detail.types.join('/')}</Text>
			   	  	  <Text>主演：{this.getDetaiActor()}</Text>
			   	  </View>
			   </View>
			</View>
		)
	}

	renderLoadingView(){
	    return (
	      <View style={styles.container}>
	        <Text>
	          正在加载...
	        </Text>
	      </View>
	    )
  	}

  	getDetaiActor(){
  		return this.state.detail.actors.slice(0,5).join('/')+' 等'
  	}
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection:'column',
    alignItems:'center',
    justifyContent: 'center',
    alignItems: 'center',
    height:300
  },

  detailView: {
    flexDirection:'row',
    justifyContent: 'flex-start',
    height:200,
    paddingLeft:20,
    paddingTop:10,
 	paddingRight:10,
  },

  thumbnail:{
    width:79.5,
    height:121.5,
  },

  rightDetai:{
  	flexDirection:'column',
    height:200,
    marginLeft:10
  }
  
});

Index.js archivo modificado como sigue:

import React from 'react';
import { AppRegistry } from 'react-native';
import HotMovie from './src/page/HotMovie';
import MovieDetail from './src/page/MovieDetail'
import Navigator from './Navigator';

AppRegistry.registerComponent('Navigator', () => Navigator);
AppRegistry.registerComponent('HotMovie', () => HotMovie);
AppRegistry.registerComponent('MovieDetail', () => MovieDetail);

En proyecto IOS, saltar archivo ViewController.m para que lea como sigue:

#import "ViewController.h"
#import <React/RCTRootView.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
    button.center = self.view.center;
    [button setTitle:@"跳转RN" forState:0];
    [button setTitleColor:[UIColor greenColor] forState:0];
    [button addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

- (void)clickButton:(UIButton*)button{
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                moduleName: @"Navigator"
                         initialProperties: nil
                             launchOptions: nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}
@end

Añadir el evento click en HotMovie.js, HotMovie.js código completo es el siguiente:

import React, { Component } from 'react';
import {StyleSheet, Image, Text, View, FlatList,TouchableOpacity} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'

var REQUEST_URL = "https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&page_limit=20&page_start=0"

export default class HotMovie extends Component<Props> {
  
  _onItemClick(item) {
    this.props.navigation.navigate('Details',{itemId:item.id,cover:item.cover,title:item.title})
  }

  constructor(props){
    super(props);
    this.state = {
      movies:null,
    }

    this.renderMovie = this.renderMovie.bind(this)
    this.fetchData = this.fetchData.bind(this)
  }

  componentDidMount(){
    this.fetchData()
  }

  fetchData(){
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          movies:responseJson.subjects
        });
      })
  }

  render() {
    if (!this.state.movies) {
      return this.renderLoadingView();
    }
    return (
      <FlatList
        data={this.state.movies}
        renderItem={this.renderMovie}
        style={styles.list}
        keyExtractor={item => item.id}
      />
    );
  }


  renderLoadingView(){
    return (
      <View style={styles.container}>
        <Text>
          正在加载...
        </Text>
      </View>
    )
  }


  renderMovie({item}){
    return(
      <TouchableOpacity style={styles.item} onPress={() => this._onItemClick(item)}>
        <Image source={{url:item.cover}} style={styles.thumbnail}/>
        <View style={styles.itemRight}>
          <Text>{item.title}</Text>
          <Text>{item.rate}</Text>
        </View>
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection:'row',
    alignItems:'center',
    justifyContent: 'center',
    alignItems: 'center',
  },
  item:{
    marginTop:1,
    flexDirection:'row',
    alignItems:'center',
    justifyContent: 'flex-start',
    height:100,
    backgroundColor:'lightgray',
    paddingLeft:10
  },
  thumbnail:{
    width:53,
    height:81,
    backgroundColor:'lightgray'
  },
  itemRight:{
    height:100,
    justifyContent: 'center',
    alignItems:'center',
    paddingLeft:10
  },
  list: {
    backgroundColor: "#F5FCFF"
  }
});

¿Qué this.props.navigation.navigate('Details')es la navegación Saltar navegación reaccionar método, pero este método no puede saltar la misma página (no afectará a), si usted quiere empujar varias veces la misma página, es necesario leer:

this.props.navigation.push('Details')

Navegar hacia atrás continuación:

this.props.navigation.goBack()

Título de navegación ajustes

En función de la demanda, nos fijamos en el Ejemplo oficial:

Si el título es fijo, la definición de una propiedad llamada navigationOptions las estáticas, se devuelve un objeto de configuración, tales como:

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };

  /* render function, etc */
}

Si los parámetros tienen que obtener de la parte superior, el código, tales como:

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };

  /* render function, etc */
}

Si desea cambiar el título, el código, tales como:

<Button
    title="Update the title"
    onPress={() => this.props.navigation.setParams({otherParam: 'Updated!'})}
  />

Si necesita modificar el estilo, como por ejemplo el código ::

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };

  /* render function, etc */
}

Estos se acaba de crear un estilo de barra de navegación de la página de inicio, esperamos que los valores globales, y luego directamente a la parte superior del Código createStackNavigator, modificación:

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    /* The header config from HomeScreen is now here */
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

A veces, queremos cambiar el título de controles personalizados, tales como botones o imágenes para mostrar, podemos:

class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('./spiro.png')}
        style={{ width: 30, height: 30 }}
      />
    );
  }
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <LogoTitle />,
  };

  /* render function, etc */
}

Volviendo a nuestro ejemplo de la demo, queremos que los valores de color de fondo de toda la columna de navegación aplicación es # f4511e, el texto es de color blanco, por lo que la configuración unificada en Navigator.js, Navigator.js código completo es el siguiente:

import React from "react";
import { createStackNavigator, createAppContainer } from 'react-navigation'
import HotMovie from './src/page/HotMovie';
import MovieDetail from './src/page/MovieDetail'

const AppNavigator = createStackNavigator(
  {
    Home: HotMovie,
    Details: MovieDetail
  },
  {
    defaultNavigationOptions: {
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
    navigationOptions: {
      tabBarLabel: 'Home!',
    },
  }
)

const AppContainer = createAppContainer(AppNavigator);
export default class Navigator extends React.Component {
  render() {
    return <AppContainer />;
  }
}

Inicio (lista de películas) barra de navegación para el movie.png cuadro del título determinado (correspondiente a la trayectoria: directorio raíz del proyecto /src/images/movie.png), con el fin de modificar HotMovie.js:

import React, { Component } from 'react';
import {StyleSheet, Image, Text, View, FlatList,TouchableOpacity} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'

var REQUEST_URL = "https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&page_limit=20&page_start=0"

class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('../image/movie.png')}
        style={{ width: 30, height: 30 }}
      />
    );
  }
}

export default class HotMovie extends Component<Props> {

  static navigationOptions = {
     headerTitle: <LogoTitle />,
  };

  //....省略代码
}

const styles = StyleSheet.create({
	//...省略代码  
});

En la página de detalles de la película, nos propusimos el título de acuerdo con el anterior parámetro de nombre de pantalla pasa a la película, la película detalla el valor por defecto:

import React,{Component} from 'react';
import {StyleSheet,Image,Text,View} from 'react-native';

export default class MovieDetail extends Component<Props>{

	static navigationOptions = ({ navigation }) => {
		return {
			title:navigation.getParam('title','电影详情')
		}
	}

	//...省略代码
}

const styles = StyleSheet.create({
  //...省略代码
});

El código fuente completo: https://github.com/dolacmeng/RNProject/tree/master
resultados operativos:

Aquí Insertar imagen Descripción

imJackXu

Publicados 103 artículos originales · ganado elogios 55 · vistas 380 000 +

carta privada preocupaciones

] [Reaccionar Native reaccionar-navegación utilizando un método de navegación

directorio

Integrado reaccionar navegación

Uso reaccionan navegación

Supongo que te gusta