Change view in Navigator in React Native

Question

Я новый, чтобы реагировать на родной.

Я использовал NavigatorIOS, но это было слишком ограничивающим, поэтому я пытаюсь использовать Navigator. В NavigatorIOS я могу изменить представление, вызвав this.props.navigator.push(), но он не работает в Navigator, он, похоже, структурирован по-разному. Как изменить вид в использовании Navigator?

Answer 1

Это минимальный рабочий навигатор - это может сделать гораздо больше (см в конце):

1. Тебе нужен главный «навигатор» вид для отображения Навигатора компонент
2. В навигаторе нужно указать как вы должны отображать сцены для разных маршрутов (свойство renderScene)
3. В этом методе renderScene вы должны визуализировать View (scene) на основе того, какой маршрут визуализируется. Маршрут - это простой объект javascript, а по условным сценам может быть идентифицирован параметром «id» маршрута. Для ясности и разделения проблем я обычно определяю каждую сцену как отдельный именованный компонент и использую имя этих компонентов как «id», хотя это просто соглашение. Это может быть что угодно (например, номер сцены). Убедитесь, что вы передаете навигатор как свойство для всех этих представлений в renderScene, чтобы вы могли перемещаться дальше (см. Ниже пример).
4. Если вы хотите переключиться на другое представление, вы фактически нажмете или замените маршрут на это представление, и навигатор позаботится об рендеринге этого маршрута в качестве сцены и надлежащей анимации сцены (хотя набор анимаций довольно ограничен) - вы можете управлять общей схемой анимации, но также иметь анимацию каждого эпизода по-разному (см. официальные документы для некоторых примеров). Навигатор держит стек (или, скорее, массив) маршрутов, так что вы можете свободно перемещаться между теми, которые уже находятся в стеке (нажатием новой, выскакивают, замена и т.д.)

«Навигатор» Вид:

render: function() { 
<Navigator style={styles.navigator} 
     renderScene={(route, nav) => 
     {return this.renderScene(route, nav)}} 
/> 
}, 

renderScene: function(route,nav) { 
    switch (route.id) { 
     case "SomeComponent": 
     return <SomeComponent navigator={nav} /> 
     case "SomeOtherComponent: 
     return <SomeOtherComponent navigator={nav} /> 
    } 
} 

SomeComponent:

onSomethingClicked: function() { 
    // this will push the new component on top of me (you can go back) 
    this.props.navigator.push({id: "SomeOtherComponent"}); 
} 


onSomethingOtherClicked: function() { 
    // this will replace myself with the other component (no going back) 
    this.props.navigator.replace({id: "SomeOtherComponent"}); 
} 

Подробнее здесь https://facebook.github.io/react-native/docs/navigator.html и вы можете найти много примеров в проекте Samples, который является частью реакции родной: https://github.com/facebook/react-native/tree/master/Examples/UIExplorer

Answer 2

Я нахожу, что примеры Facebook являются либо упрощенными, либо сложными при демонстрации работы Navigator. Основываясь на примере @ jarek-potiuk, я создал простое приложение, которое будет переключать экраны взад и вперед.

В этом примере я использую: react-native: 0.36.1

index.android.js

import React, { Component } from 'react'; 
import { AppRegistry, Navigator } from 'react-native'; 

import Apple from './app/Apple'; 
import Orange from './app/Orange' 

class wyse extends Component { 
    render() { 
    return (
     <Navigator 
     initialRoute={{screen: 'Apple'}} 
     renderScene={(route, nav) => {return this.renderScene(route, nav)}} 
     /> 
    ) 
    } 

    renderScene(route,nav) { 
    switch (route.screen) { 
     case "Apple": 
     return <Apple navigator={nav} /> 
     case "Orange": 
     return <Orange navigator={nav} /> 
     } 
    } 
} 

AppRegistry.registerComponent('wyse',() => wyse); 

приложение/Apple.js

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

export default class Apple extends Component { 
    render() { 
    return (
     <View> 
     <Text>Apple</Text> 
     <TouchableHighlight onPress={this.goOrange.bind(this)}> 
      <Text>Go to Orange</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 

    goOrange() { 
    console.log("go to orange"); 
    this.props.navigator.push({ screen: 'Orange' }); 
    } 
} 

приложение/Orange. js

import React, { Component, PropTypes } from 'react'; 
import { View, Text, TouchableHighlight } from 'react-native'; 

export default class Orange extends Component { 
    render() { 
    return (
     <View> 
     <Text>Orange</Text> 
     <TouchableHighlight onPress={this.goApple.bind(this)}> 
      <Text>Go to Apple</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 

    goApple() { 
    console.log("go to apple"); 
    this.props.navigator.push({ screen: 'Apple' }); 
    } 
} 

Answer 3

У меня была такая же проблема, я не мог найти хороший пример навигации. Мне нужна была возможность контролировать представления, чтобы перейти на новый экран, но также иметь возможность вернуться к предыдущему экрану.

Я использовал вышеупомянутый ответ Andrew Wei и создал новое приложение, а затем скопировал его код. Это хорошо работает, но .push будет продолжать создавать новые слои друг над другом (Apple> Orange> Apple> Orange> Apple> Orange и т. Д.). Поэтому я использовал .pop в файле Orange.js под номером goApple() вместо .push.

Это работает как кнопка «назад», которая была тем, что я искал, а также преподавал, как перейти на другие страницы.