탐색 구성요소 반응 탐색을 사용하는 방법

이번에 소개할 내용은 navigation컴포넌트 반응 탐색을 사용하는 방법입니다. 우리 모두는 라우팅을 특별하게 처리해야 하는 일반 애플리케이션에서 탭을 뛰어넘어야 합니다. 이 기사는 당신에게 좋은 분석을 제공할 것입니다.

구체적인 상황은 다음과 같습니다. 앱은 홈, 빌, 나라는 세 가지 주요 모듈로 나누어져 있으며, 현재 요구 사항은 홈 푸시입니다. HomeTwo, HomeTwo push BillTwo, BillTwo Bill Bill 홈페이지로 돌아갑니다.

const Components = {
 HomeTwo: { screen: HomeTwo, path:'app/HomeTwo' },
 HomeThree: { screen: HomeThree, path:'app/HomeThree' },
 BillTwo: { screen: BillTwo, path:'app/BillTwo' },
 BillThree: { screen: BillThree, path:'app/BillThree' },
}
  
const Tabs = TabNavigator({
 Home: {
  screen: Home,
  path:'app/home',
  navigationOptions: { 
  tabBar: {
   label: '首页',
   icon: ({tintColor}) => (<Image source={require(&#39;./images/home.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),
  },
  }
 },
 Bill: {
  screen: Bill,
  path:&#39;app/bill&#39;,
  navigationOptions: {
  tabBar: {
   label: &#39;账单&#39;,
   icon: ({tintColor}) => (<Image source={require(&#39;./images/bill.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),
  },
  }
 },
 Me: {
  screen: Me,
  path:&#39;app/me&#39;,
  navigationOptions: {
  tabBar: {
   label: &#39;我&#39;,
   icon: ({tintColor}) => (<Image source={require(&#39;./images/me.png&#39;)} style={[{tintColor: tintColor},styles.icon]}/>),
  },
  }
 }
 }, {
 tabBarPosition: &#39;bottom&#39;, 
 swipeEnabled: false,
 animationEnabled: false, 
 lazyLoad: false, 
 backBehavior: &#39;none&#39;, 
 tabBarOptions: {
  activeTintColor: &#39;#ff8500&#39;, 
  inactiveTintColor: &#39;#999&#39;,
  showIcon: true, 
  indicatorStyle: {
  height: 0 
  },
  style: {
  backgroundColor: &#39;#fff&#39;, 
  },
  labelStyle: {
  fontSize: 10, 
  },
 },
 });
  
  
 const Navs = StackNavigator({
 Home: { screen: Tabs, path:&#39;app/Home&#39; },
 Bill: { screen: Tabs, path:&#39;app/Bill&#39; },
 Me: { screen: Tabs, path:&#39;app/Me&#39; },
 ...Components
 }, {
 initialRouteName: &#39;Home&#39;, 
 navigationOptions: { 
  header: { 
  style: {
   backgroundColor: &#39;#fff&#39;
  },
  titleStyle: {
   color: &#39;green&#39;
  }
  },
  cardStack: { 
  gesturesEnabled: true
  }
 },
 mode: &#39;card&#39;, 
 headerMode: &#39;screen&#39;
 });

HomeTwo의 반응 탐색과 함께 제공되는 재설정 작업을 사용하여 라우팅 정보를 재설정합니다.

// push BillTwo
this.props.navigation.dispatch(resetAction);
  
// 使用reset action重置路由
const resetAction = NavigationActions.reset({
 index: 1, // 注意不要越界
 actions: [ // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo
 NavigationActions.navigate({ routeName: 'Bill'}),
 NavigationActions.navigate({ routeName: 'BillTwo'})
 ]
});

HomeTwo에서 BillTwo 페이지로 푸시한 후 BillTwo의 Bill 홈 페이지로 돌아가려면 왼쪽 상단에 있는 탐색 버튼 을 클릭하세요.

위의 소개를 읽으신 후 방법을 익히셨으리라 믿습니다. PHP 중국어 웹사이트!

관련 읽기:

JS

JS

js 코드 케이스의 부울 값, 관계 연산자 및 논리 연산자에 대한 자세한 설명과 예 ​​- 계산 기반 JS

날짜 요일🎜🎜🎜

위 내용은 탐색 구성요소 반응 탐색을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!