react-native
नेविगेटर सर्वश्रेष्ठ अभ्यास

नाविक

Navigator रिएक्टिव नेटिव का डिफ़ॉल्ट नेविगेटर है। एक Navigator घटक मार्ग ऑब्जेक्ट्स के एक स्टैक का प्रबंधन करता है, और उस स्टैक के प्रबंधन के लिए तरीके प्रदान करता है।

<Navigator
  ref={(navigator) => { this.navigator = navigator }}
  initialRoute={{ id: 'route1', title: 'Route 1' }}
  renderScene={this.renderScene.bind(this)}
  configureScene={(route) => Navigator.SceneConfigs.FloatFromRight}
  style={{ flex: 1 }}
  navigationBar={
    // see "Managing the Navigation Bar" below
    <Navigator.NavigationBar routeMapper={this.routeMapper} /> 
  }
/>

रूट स्टैक का प्रबंधन

सबसे पहले, initialRoute ध्यान दें। एक मार्ग केवल एक जावास्क्रिप्ट वस्तु है, और आप जो भी आकार चाहते हैं, ले सकते हैं और जो भी मान चाहते हैं वह है। यह प्राथमिक तरीका है जिससे आप अपने नेविगेशन स्टैक में घटकों के बीच मूल्यों और विधियों को पास करेंगे।

Navigator जानता है कि उसके renderScene प्रोप से लौटे मूल्य के आधार पर क्या प्रस्तुत renderScene है।

renderScene(route, navigator) {
  if (route.id === 'route1') {
    return <ExampleScene navigator={navigator} title={route.title} />; // see below
  } else if (route.id === 'route2') {
    return <ExampleScene navigator={navigator} title={route.title} />; // see below
  }
}

आइए इस उदाहरण में ExampleScene कार्यान्वयन की कल्पना करें:

function ExampleScene(props) {

  function forward() {
    // this route object will passed along to our `renderScene` function we defined above.
    props.navigator.push({ id: 'route2', title: 'Route 2' });
  }

  function back() {
    // `pop` simply pops one route object off the `Navigator`'s stack
    props.navigator.pop();
  }

  return (
    <View>
      <Text>{props.title}</Text>
      <TouchableOpacity onPress={forward}>
        <Text>Go forward!</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={back}>
        <Text>Go Back!</Text>
      </TouchableOpacity>
    </View>
  );
}

नेविगेटर को कॉन्फ़िगर करना

आप कॉन्फ़िगर कर सकते हैं Navigator के configureScene प्रोप के साथ। यह एक फ़ंक्शन है जो route ऑब्जेक्ट को पार कर गया है, और कॉन्फ़िगरेशन ऑब्जेक्ट को वापस करने की आवश्यकता है। ये उपलब्ध कॉन्फ़िगरेशन ऑब्जेक्ट हैं:

• नेविगेटर.सैनेकोनफिग्स.पुष्पफ्रेम (डिफ़ॉल्ट)
• Navigator.SceneConfigs.FloatFromRight
• Navigator.SceneConfigs.FloatFromLeft
• Navigator.SceneConfigs.FloatFromBottom
• Navigator.SceneConfigs.FloatFromBottomAndroid
• Navigator.SceneConfigs.FadeAndroid
• Navigator.SceneConfigs.HorizontalSwipeJump
• Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
• Navigator.SceneConfigs.VerticalUpSwipeJump
• Navigator.SceneConfigs.VerticalDownSwipeJump

आप इन वस्तुओं में से एक को संशोधन के बिना वापस कर सकते हैं, या आप नेविगेशन बदलाव को अनुकूलित करने के लिए कॉन्फ़िगरेशन ऑब्जेक्ट को संशोधित कर सकते हैं। उदाहरण के लिए, एज हिट चौड़ाई को और अधिक बारीकी से संशोधित करने के लिए iOS UINavigationController के interactivePopGestureRecognizer UINavigationController का अनुकरण करें:

configureScene={(route) => {
  return {
    ...Navigator.SceneConfigs.FloatFromRight,
    gestures: {
      pop: {
        ...Navigator.SceneConfigs.FloatFromRight.gestures.pop,
        edgeHitWidth: Dimensions.get('window').width / 2,
      },
    },
  };
}}

नैविगेशनबार का प्रबंधन करना

Navigator घटक एक navigationBar प्रॉप के साथ आता है, जो सैद्धांतिक रूप से किसी भी ठीक से कॉन्फ़िगर किए गए रिएक्ट घटक को ले सकता है। लेकिन सबसे आम कार्यान्वयन डिफ़ॉल्ट Navigator.NavigationBar का उपयोग करता है Navigator.NavigationBar । यह एक routeMapper प्रोप लेता है routeMapper उपयोग आप मार्ग के आधार पर नेविगेशन बार की उपस्थिति को कॉन्फ़िगर करने के लिए कर सकते हैं।

एक routeMapper तीन कार्यों के साथ एक नियमित जावास्क्रिप्ट ऑब्जेक्ट है: Title , RightButton , और LeftButton । उदाहरण के लिए:

const routeMapper = {

  LeftButton(route, navigator, index, navState) {
    if (index === 0) {
      return null;
    }

    return (
      <TouchableOpacity
        onPress={() => navigator.pop()}
        style={styles.navBarLeftButton}
      >
        <Text>Back</Text>
      </TouchableOpacity>
    );
  },

  RightButton(route, navigator, index, navState) {
    return (
      <TouchableOpacity
        onPress={route.handleRightButtonClick}
        style={styles.navBarRightButton}
      >
        <Text>Next</Text>
      </TouchableOpacity>
   );
  },

  Title(route, navigator, index, navState) {
    return (
      <Text>
        {route.title}
      </Text>
    );
  },
};

और देखें

प्रत्येक प्रोप के अधिक विस्तृत प्रलेखन के लिए , नेविगेटर का उपयोग करने के लिए Navigator लिए आधिकारिक प्रतिक्रिया मूल दस्तावेज और रिएक्टिव नेटिव गाइड देखें।

प्रतिक्रिया मूल ऐप्स में नेविगेशन के लिए प्रतिक्रिया-नेविगेशन का उपयोग करें

रिएक्शन-नेविगेशन की मदद से, आप अपने ऐप में नेविगेशन को वास्तव में आसान बना सकते हैं।

प्रतिक्रिया-नेविगेशन स्थापित करें

npm install --save react-navigation

उदाहरण:

import { Button, View, Text, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

const App = StackNavigator({
  FirstPage: {screen: FirstPage},
  SecondPage: {screen: SecondPage},
});

class FirstPage extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;

    return (
      <Button
        title='Go to Second Page'
        onPress={() =>
          navigate('SecondPage', { name: 'Awesomepankaj' })
        }
      />
    );
  }
}

class SecondPage extends React.Component {
  static navigationOptions = ({navigation}) => ({
    title: navigation.state.params.name,
  });

  render() {
    const { goBack } = this.props.navigation;
    return (
      <View>
        <Text>Welcome to Second Page</Text>
        <Button
          title="Go back to First Page"
          onPress={() => goBack()}
        />
      </View>
    );
  }
}

प्रतिक्रिया-मूल-राउटर-फ्लक्स के साथ प्रतिक्रिया-देशी नेविगेशन

npm install --save react-native-router-flux का उपयोग करके स्थापित करें

प्रतिक्रिया-मूल-राउटर-फ्लक्स में, प्रत्येक मार्ग को एक <Scene> कहा जाता है

<Scene key="home" component={LogIn} title="Home" initial />

key एक विशिष्ट स्ट्रिंग जिसका उपयोग विशेष दृश्य को संदर्भित करने के लिए किया जा सकता है।

component किस घटक को दिखाना है, यह यहाँ है

title नवबेर बनाते हैं और इसे एक शीर्षक देते हैं 'होम'

initial यह ऐप की पहली स्क्रीन है

उदाहरण:

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import LogIn from './components/LogIn';
import SecondPage from './components/SecondPage';

const RouterComponent = () => {
  return (
    <Router>
      <Scene key="login" component={LogIn} title="Login Form" initial />
      <Scene key="secondPage" component={SecondPage} title="Home" />
    </Router>
  );
};

export default RouterComponent;

इस फाइल को मुख्य App.js (इंडेक्स फाइल) में आयात करें और इसे रेंडर करें। अधिक जानकारी के लिए इस लिंक पर जा सकते हैं।