آموزش حرکت بین صفحات (Navigation) در React Native

آموزش حرکت بین صفحات (Navigation) در React Native

application های موبایل معمولا تک صفحه ای نیستند. مدیریت نمایش و حرکت بین چندین صفحه معمولا توسط navigator انجام می شود.

این بخش آموزش، component های موجود در React Native، که مناسب این کار را بررسی می کند. اگر تازه با این مبحث آشنا شده اید، بهتر است از کتابخانه ی React Navigation استفاده کنید. این کتابخانه راه حل ساده ای ارائه می دهد، و هردو شیوه ی stack navigation و tabbed navigation را در هردو سیستم عامل android و iOS پشتیبانی می کند.

اگر می خواهید application تان شبیه یک native application ها به نظر برسد، یا می خواهید React Native را به یک application که به صورت native حرکت بین صفحات را مدیریت می کند، اضافه کنید، کتابخانه ی react-native-navigation مناسب کار شماست.

React Navigation

راه حل رایج بین توسعه دهندگان React، کتابخانه ی مستقل React Navigation است که به توسعه دهندگان امکان راه اندازی چندین صفحه در app با چند خط کد را می دهد.

گام اول نصب این کتابخانه در پروژه است:

npm install --save react-navigation

گام دوم نصب react-native-gesture-handler است:

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler

حال باید react-native را به react-native-gesture-handler ارتباط دهیم:

react-native link react-native-gesture-handler

سپس میتوانیم به راحتی یک application با یک صفحه Home، و یک صفحه profile بسازیم:

import {createStackNavigator, createAppContainer} from 'react-navigation';
const MainNavigator = createStackNavigator({
  Home: {screen: HomeScreen},
  Profile: {screen: ProfileScreen},
});
const App = createAppContainer(MainNavigator);
export default App;

هر component صفحه می تواند navigation options هایی مثل title برای عنوان صفحه، set کند. می تواند روی navigation prop رویدادهایی استفاده کند که صفحه را به صفحات دیگر ارتباط دهد:

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const {navigate} = this.props.navigation;
    return (
                        < Button title="Go to Jane's profile"
                                onPress={() = > navigate('Profile', {name: 'Jane'})}
      / >
    );
  }
}

با وجود React Navigation router ها، تغییر در الگوی حرکات کار آسانی است. از آنجا که router ها می توانند درون هم قرار بگیرند، می توانید الگوی حرکات را برای قسمتی از application تغییر دهید بدون اینکه کل آن تغییر کند.

viewها در کتابخانه React Navigation از component های native و کتابخانه ی Animated برای ارائه ی انمیشن های fps 60 استفاده می کنند. بعلاوه، انیمیشن ها و حرکات به راحتی می تواند به شکل مورد نظر شما، سفارشی شود.

برای مطالعه کامل درمورد React Navigation، این لینک را بیبنید و یا سری به مستندات دیگر مثل مقدمه ای بر Navigator ها بزنید.