Как ориентироваться в React-Native? - PullRequest
Новая
       41

Как ориентироваться в React-Native?

0 голосов
/ 10 мая 2018

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

Здесь

То, как я это делаю. 

const AppStack = StackNavigator({ Main: Feeds });
const AuthStack = StackNavigator({ Launch: LaunchScreen, });

export default SwitchNavigator({
  Auth: AuthStack,
  App: AppStack
});

В моем LaunchScreen.js 

const SimpleTabs = TabNavigator(
  {
    Login: {
      screen: Login,
      path: ""
    },
    SignUp: {
      screen: SignUp,
      path: "doctor"
    }
  },
);

<SimpleTabs screenProps={{rootNavigation : this.props.navigation  }}/>

Но проблема в том, что в моем компоненте LaunchScreen есть TabNavigator, который содержит мои два других компонента Login.js и SignUp.js, но кнопка в моем Login.js не перемещает его в Feed.js.

Когда вы нажимаете на кнопку, это выполняется. 

signInAsync = async () => {
    await AsyncStorage.setItem('userToken', 'abc');
    this.props.navigation.navigate('Main');
    console.log("AAAAAsSSS");
  };

My LaunchScreen.js содержит TabNavigation , которая позволяет перемещаться между двумя компонентами, т.е. Login.js и SignUp.js .

Теперь, когда вы нажимаете на кнопку «Вход», которая находится в Login.js компоненте, он будет аутентифицировать пользователя и переключит весь LauchScreen.js компонент с компонентом Feed.js .

Я новичок в реакции-нативный.

Ответы [ 3 ]

0 голосов
/ 10 мая 2018

Если вы хотите перейти к Feeds.js, перейдите как this.props.navigation.navigate('App');

не как

this.props.navigation.navigate('Main');

потому что ваш 

export default SwitchNavigator({
  Auth: AuthStack,
  App: AppStack // here is your stack of Main
});

см. пример

0 голосов
/ 10 мая 2018

Я столкнулся с той же проблемой несколько месяцев назад. Слава богу, что вы потратили всего 6 часов, я почти потратил около 4 дней, чтобы найти решение.

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

Итак, у вас есть swtichNavigator, который содержит 2 стековых навигатора (скажем, стека 1 и стека 2), stack1 имеет фиды, а stack2 имеет навигатор вкладок с логином и регистрацией.

Теперь вы хотите перейти от login.js к feeds.js (скажем, имя файла - feeds.js). Как уже упоминалось, вы не можете перейти обратно к родителю или прародителю. Тогда как решить эту проблему?

В реагировать на нативный язык вы имеете право передавать params (screenprops) от родителя к детям. Используя это, вам нужно сохранить this.props.navigation launchScreen в переменную и передать ее в tab / login (проверьте древовидную структуру). Теперь в файле login.js используйте эту переменную для навигации.

Вы просто передаете привилегию навигации от родителя к детям.

Редактирование здесь: 

<InnerTab screenProps={{rootNavigation : this.props.navigation  }} />

Здесь InnerTab - это навигатор по вкладкам. 

export const InnerTab = TabNavigator({
login: {
    screen: login,
    },
},
signup: {
    screen: signup,
    },
},

},

в классе входа, используйте const { navigate } = this.props.screenProps.rootNavigation; Теперь вы можете использовать переменную navigate.

Я знаю, это немного сложно понять, но я пытался, и это работает.

0 голосов
/ 10 мая 2018

Вы можете использовать response-native-router-flux (npm install --save react-native-router-flux)

просто создайте один файл Navigator.js и определите каждую страницу, по которой вы хотите перемещаться. 

import React from 'react';
import { Router, Scene } from 'react-native-router-flux';

import LaunchScreen from '../components/LaunchScreen.js';
import Feed from '../components/Feed.js';


const Navigator = () => {
  return (
    <Router>
      <Scene key="root">
        <Scene key="lauchscreen" component={LaunchScreen} hideNavBar initial /> 
        <Scene key="feedscreen" type="reset" hideNavBar component={Feed} />
      </Scene>
    </Router>
  );
};

export default Navigator;

теперь в вашем файле App.js добавьте: 

import Navigator from './src/Navigator.js';

export default class App extends Component<Props> {
render() {
    return (
          <Navigator />
    );
  }
}

теперь в вашем login.js, когда вы нажимаете на кнопку входа, напишите это: 

import { Actions } from 'react-native-router-flux';

  onLoginClick() {
    Actions.feedscreen();
  }

Вот и все .. счастливое кодирование.

...