Реальный нативный навигатор

Ответ 1

Вам нужно настроить свойство passProps в навигаторе. Есть несколько недавних примеров, в частности здесь и здесь.

<Navigator
  initialRoute={{name: 'Main', component: Main, index: 0}}
  renderScene={(route, navigator) =>    {
    return React.createElement(<YourComponent />, { ...this.props, ...route.passProps, navigator, route } );
  }} />

или

<Navigator
  initialRoute={{name: 'Main', component: Main, index: 0}}
  renderScene={(route, navigator) => {
      <route.component {...route.passProps} navigator={navigator} route={route} />
     }
   }
 />

Если вы ищете самые простые настройки, чтобы понять функциональность, я создал здесь проект который вы можете ссылаться, и вставил код ниже.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  Image,
  TouchableHighlight, TouchableOpacity
} = React;

class Two extends React.Component {
    render(){
    return(
        <View style={{marginTop:100}}>
          <Text style={{fontSize:20}}>Hello From second component</Text>
          <Text>id: {this.props.id}</Text>
          <Text>name: {this.props.name}</Text>
            <Text>name: {this.props.myVar}</Text>
        </View>
    )
  } 
}

class Main extends React.Component {
  gotoNext(myVar) {
   this.props.navigator.push({
      component: Two,
      passProps: {
        id: 'page_user_infos',
        name: 'page_user_infos',
        myVar: myVar,
      }
    })
  }

  render() {
    return(
      <View style={{flex: 4, flexDirection: 'column', marginTop:100}}>
        <TouchableHighlight style={{ height:40, borderWidth:1, marginBottom:10, backgroundColor: '#ddd'}} name='Pole' onPress={ () => this.gotoNext('This is a property that is being passed') }>
          <Text style={{textAlign:'center'}}>Go to next page</Text>
        </TouchableHighlight>
      </View> 
    )
  }
}

class App extends React.Component {
  render() {

    return (
      <Navigator
                style={{flex:1}}
          initialRoute={{name: 'Main', component: Main, index: 0}}
          renderScene={(route, navigator) =>    {
            if (route.component) {
                          return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
                      }
                }}
          navigationBar={
            <Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} />
      } />
);
}
}


var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    if(index > 0) {
      return (
      <TouchableHighlight  style={{marginTop: 10}} onPress={() => {
            if (index > 0) {
              navigator.pop();
            } 
        }}>
       <Text>Back</Text>
     </TouchableHighlight>
 )} else {
 return null}
 },
  RightButton(route, navigator, index, navState) {
    return null;
  },
  Title(route, navigator, index, navState) {
    return null
  }
};


var styles = StyleSheet.create({

});

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

Ответ 2

Я бы настроил ваш навигатор как этот пример. По существу, поместите навигатор в свою индексную сцену и добавьте туда все необходимые компоненты. Затем определите функцию renderScene() для обработки всех маршрутов на основе имени (или идентификатора, как и вы). Я бы не использовал компонентный объект как сам предмет, который передается из вызова метода push-навигации, потому что если вы это сделаете, вам придется импортировать компонент в этом конкретном представлении. Я использовал это и столкнулся с множеством проблем, поэтому я просто предупреждаю вас, если вы столкнулись с какими-либо проблемами, рассмотрите этот подход.

  renderScene(route, navigator) {

    if(route.name == 'root') {
      return <Root navigator={navigator} />
    }
    if(route.name == 'register') {
      return <Register navigator={navigator} />
    }
    if(route.name == 'login') {
      return <Login navigator={navigator} />
    }
    if(route.name == 'home') {
      return <Home navigator={navigator} {...route.passProps} />
    }
    if(route.name == 'update') {
      return <Update navigator={navigator} {...route.passProps} />
    }

  }

Ответ 3

Иногда пропуская подсказка не работает (по крайней мере для меня). То, что я делаю, это передать ее в самом объекте маршрута.

nav.push({
        id: 'MainPage',
        name: 'LALA',
        token: tok
      });

поэтому для доступа к нему в следующей сцене я использую

var token = this.props.navigator.navigationContext.currentRoute.token;

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

Это может быть неправильный путь, но я считаю это немного более удобным.

Ответ 4

Если вы используете react-native-navigation, просто добавьте passProps к вашему объекту params, в соответствии с .

например:.

this.props.navigator.push({
  screen: 'example.Screen',
  title: 'Screen Title',
  passProps: {
    id: 'MainPage',
    name: 'mainPage'
  }
})

Ответ 5

Вы также можете передавать параметры в sceneA на сцену B следующим образом. Предположим, что _handlePressOnClick() записывается на некотором нажатии кнопки на экране SceneA.

_handlePressOnClick(){ //this can be anything
 this.props.navigator.push({
    name: "sceneB", //this is the name which you have defined in _renderScene
    otherData: {
      dataA: "data1"
    }
 })
}

Затем определенные данные в вашем _renderScene, где вы внедрили свой навигатор таким образом

_renderScene(route, navigator) {        
    switch(route.name) {
        case "sceneA":
            return (
                <sceneA navigator={navigator} />
            );
        break;
        case "sceneB":
            return (
                <sceneB navigator={navigator} otherData={route.otherData}/>
            );
        break;
  }

Не забудьте импортировать файлы ваших представлений, как это

import sceneA from './sceneA';
import sceneB from './sceneB';

Теперь в файле sceneB вы можете получить доступ к своим другим данным следующим образом

var {dataA} = this.props.otherData;

or

constructor(props){
  super(props);
  this.state={
     otherData: this.props.otherData
  }
}

то в вашем методе render() вы можете получить доступ к другим данным, используя состояние.

<Text>{this.state.otherData.dataA}</Text>

Вы также можете использовать для поддержания состояния глобального уровня с помощью сокращения, которое доступно через действие и реквизит автоматически.

Ответ 6

1.Чтобы передать данные из сцены A в сцену B, вы должны указать в теге навигатора, что вы также передаете данные с помощью маршрута. ех.

if(route.name == 'home') {
      return <Home navigator={navigator} data={route.data} />
    }

отправить данные из сцены A напр. this.props.navigator.push({name:'sceneB',data:{name:this.state.name},});

в сцене B данные доступа, подобные этому ех. this.props.data.name и вы получаете данные из сцены A в сцену B