반응 탐색의 탐색 사용법에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

반응 탐색의 탐색 사용법에 대한 자세한 설명

亚连

Jun 22, 2018 pm 06:38 PM

nativereact항해

이 글은 주로 React Native의 React-Navigation Navigation 사용에 대한 자세한 설명을 소개하고 있습니다. 관심 있는 분들은 참고하시면 됩니다.

1. 오픈 소스 라이브러리 소개

올해 1월에는 새로운 오픈소스 React-Navigation 라이브러리가 많은 주목을 받았습니다. 3개월도 안 되어 github의 별 수가 4,000개 이상에 도달했습니다. Fb에서는 라이브러리 사용을 권장하며, 최신 버전의 React Native 0.44에서는 Navigator가 삭제될 예정입니다. 반응 탐색은 네이티브와 유사한 성능 경험을 제공한다고 합니다. 이는 향후 React Native 탐색 구성 요소의 주류가 될 수 있습니다. 이 글은 [^1.0.0-beta.9] 버전을 기반으로 이 라이브러리의 활용과 실무 기술을 소개하는 글입니다. 보시다시피 베타 버전이지만 기본적으로 안정적이어서 프로젝트에 자유롭게 사용할 수 있습니다. React-navigation의 공식 문서 소개

이 라이브러리에는 세 가지 유형의 구성 요소가 포함되어 있습니다.
(1) StackNavigator: 페이지를 건너뛰고 매개 변수를 전달하는 데 사용됩니다.
(2) TabNavigator: 하단 탐색 표시줄과 유사하며 스위치를 켜는 데 사용됩니다. 같은 화면 다른 인터페이스
(3) DrawerNavigator: 사이드 슬라이딩 메뉴 탐색 바, 서랍 탐색으로 화면을 쉽게 설정하는 데 사용됨

2. 반응 탐색 사용

구체적인 내용은 대략 나누어집니다.
(1) 반응 탐색 라이브러리 속성 소개
(2) StackNavigator 및 TabNavigator는 인터페이스 간 점프 및 탭 전환 구현
(3) StackNavigator는 인터페이스 간 점프, 전송 및 값 가져오기
(4) DrawerNavigator는 서랍 탐색 메뉴를 구현합니다
(5) DrawerNavigator 확장 기능
(6) 사용자 정의 반응 탐색

1. StackNavigator 속성 소개
navigationOptions: StackNavigator의 일부 속성을 구성합니다.

title: 제목을 설정하면 탭 표시줄이 동일해집니다.
header: 일부 탐색 속성을 설정할 수 있습니다. 상단 탐색 모음을 숨기려면 속성을 null로 설정하세요.
headerTitle: 탐색 모음 제목 설정, 권장
headerBackTitle: 점프 페이지 왼쪽에 있는 돌아가기 화살표 뒤에 텍스트를 설정합니다. 기본값은 이전 페이지의 제목입니다. 사용자 정의하거나 null로 설정할 수 있습니다.
headerTruncatedBackTitle: 이전 페이지 제목이 돌아가기 화살표 뒤의 텍스트와 일치하지 않는 경우 설정하며 기본값은 "return"으로 변경됩니다.
headerRight: 탐색 오른쪽을 설정합니다. 술집. 버튼이나 기타 뷰 컨트롤이 될 수 있습니다.
headerLeft: 탐색 모음의 왼쪽을 설정합니다. 버튼이나 기타 뷰 컨트롤이 될 수 있습니다.
headerStyle: 탐색 모음의 스타일을 설정합니다. 배경 색상, 너비, 높이 등
headerTitleStyle: 탐색 모음 텍스트 스타일 설정
headerBackTitleStyle: 탐색 모음 '반환' 텍스트 스타일 설정
headerTintColor: 탐색 모음 색상 설정
headerPressColor Android: Android 고유 색상 질감을 설정하려면 Android 버전이 5.0 이상이어야 합니다.
gesturesEnabled: 슬라이딩 리턴 제스처 지원 여부, iOS는 기본적으로 지원하며 Android는 기본적으로 꺼짐

screen: 해당 인터페이스 이름, 가져온 후 페이지를 채워야 함

mode: 정의 점프 스타일

card: iOS 및 Android의 기본 스타일 사용

modal: iOS 고유, 화면이 아래쪽에서 그려짐 . iOS의 현재 효과와 유사합니다.

headerMode: 이전 페이지로 돌아갈 때 애니메이션 효과

float: iOS 기본 효과

screen: 슬라이딩 프로세스 중에 전체 페이지가 반환됩니다.

none: 애니메이션 없음

cardStyle: 사용자 정의 설정 점프 효과

transitionConfig: 슬라이딩 리턴 구성 사용자 정의
onTransitionStart: 전환 애니메이션이 시작되려고 할 때 호출되는 함수
onTransitionEnd: 전환 시 호출되는 함수 애니메이션이 완료되었습니다.

경로: 라우팅에 설정된 경로의 오버레이 매핑 구성

initialRouteName: 기본 페이지 구성 요소를 설정합니다. 이는 위에 등록된 페이지 구성 요소여야 합니다.

initialRouteParams: 초기 라우팅 매개 변수

참고: 그렇지 않을 수도 있습니다. 경로를 잘 이해하세요. 경로 속성은 다른 앱이나 브라우저가 URL을 사용하여 이 앱을 열고 지정된 페이지로 들어가는 데 적합합니다. 경로 속성은 인터페이스 경로를 선언하는 데 사용됩니다(예: [/pages/Home]). 이때 모바일 브라우저에 app name://pages/Home을 입력하여 앱을 시작하고 홈 인터페이스로 들어갈 수 있습니다.

2. TabNavigator 속성 소개

화면: 인터페이스 이름에 해당하며 값을 전달하고 다른 페이지로 이동할 수 있습니다.

navigationOptions: TabNavigator의 일부 속성을 구성합니다.

title: 제목, 탐색 표시줄과 탭 표시줄의 제목을 동시에 설정합니다.

tabBarVisible: 탭 표시줄을 숨길지 여부입니다. 기본적으로 숨겨지지 않음(true)

tabBarIcon: 탭바의 아이콘을 설정합니다. 각각 설정해야 합니다.

tabBarLabel: 탭바의 제목을 설정합니다. 권장

탐색 모음 구성

tabBarPosition: 탭바의 위치를 설정합니다. iOS 기본값은 하단, Android 기본값은 상단입니다. (속성값: 'top', 'bottom')

swipeEnabled: 탭 간 슬라이딩 허용 여부

animationEnabled: 탭 변경 시 애니메이션 표시 여부

lazy: 탭을 미리 렌더링하는 것이 아니라 필요에 따라 느리게 렌더링할지 여부, 이는 앱이 열리면 모든 하단 탭 표시줄이 로드된다는 의미입니다. 기본값은 false이고 권장 사항은 true입니다.

trueinitialRouteName: 기본 페이지 구성 요소를 설정합니다.

backBehavior: 뒤로 키를 눌러 다음으로 이동합니다. 첫 번째 탭(홈 페이지), none은 점프 없음

tabBarOptions: 탭 표시줄 iOS 속성의 일부 속성 구성

activeTintColor: 레이블 및 아이콘의 전경색이 활성화된 경우

activeBackgroundColor: 레이블 및 아이콘의 배경색이 활성화된 경우 is active

inactiveTintColor: 라벨과 아이콘의 전경색이 활성화된 경우 배경화면이 비활성화된 경우

inactiveBackgroundColor: 라벨과 아이콘의 배경색 비활성 시

showLabel: 라벨 표시 여부, 기본 활성화 스타일: 탭바 스타일

labelStyle: 라벨 스타일 Android 속성

activeTintColor: 라벨 및 아이콘 전경색이 활성화된 경우

inactiveTintColor: 라벨 및 아이콘의 전경색이 비활성화된 경우

showIcon: 아이콘 표시 여부, 기본적으로 닫힘

showLabel : 라벨 표시 여부, 기본적으로 활성화 style: 탭바 스타일

labelStyle: 라벨 스타일 upperCaseLabel: 라벨을 대문자로 표시할지 여부, 기본값은 true

pressColor: 재질 파급 효과의 색상(Android 버전은 더 커야 함) 5.0 이상)

pressOpacity: 누른 라벨의 투명도 변경(안드로이드 버전은 5.0 미만이어야 함)

scrollEnabled: 활성화 여부 스크롤 가능 탭 tabStyle: 탭 스타일

indicatorStyle: 스타일 객체 탭 표시기(탭 하단에 있는 행) Android 하단에 추가 선이 있습니다. 이 문제를 일시적으로 해결하려면 높이를 0으로 설정하세요. 서랍 너비

drawerPosition - 옵션은 왼쪽 또는 오른쪽입니다. 기본값은 왼쪽 위치

contentComponent - 탐색 항목과 같은 서랍 콘텐츠를 렌더링하는 데 사용되는 구성 요소입니다. 서랍의 탐색을 수신합니다. 기본값은 DrawerItems

order - 서랍 항목의 순서를 정의하는 RouteNames 배열입니다.
backBehavior - 뒤로 버튼을 누르면 초기 경로로 전환되나요? 그렇다면 초기 경로로 설정하고, 그렇지 않으면 없음으로 설정하십시오. defaultRoute 동작의 기본값

activeBackgroundColor - 활성 레이블의 배경색

inactiveTintColor - 레이블 및 아이콘 색상 비활성 라벨 아이콘 색상

labelStyle - 라벨이 문자열일 때 콘텐츠 섹션의 텍스트 스타일을 재정의하는 스타일 개체
Get 위에서 대략적인 아이디어 우리는 반응 탐색의 세 가지 구성 요소에 대한 몇 가지 기본 속성을 배웠으므로 소매를 걷어붙이고 코드를 걷어붙여 기적을 목격했습니다.
4. StackNavigator + TabNavigator를 사용하여 탭 인터페이스 전환 및 인터페이스 간 탐색 구현
API 정의: StackNavigator(RouteConfigs, StackNavigatorConfig), TabNavigator(RouteConfigs, TabNavigatorConfig)
(1) 반응 탐색 통합: 터미널에서 실행 【 npm install React-navigation --save ]

(2) 필요한 구성요소를 인터페이스로 가져오기:

import {StackNavigator,TabNavigator,TabBarBottom} from &#39;react-navigation&#39;; 
import HomeScreen from &#39;./pages/HomePage&#39;; 
import MineScreen from &#39;./pages/MinePage&#39;;

(3) TabNavigator 정의:

const Tab = TabNavigator( 
 { 
  Home:{ 
   screen:HomeScreen, 
   navigationOptions:({navigation}) => ({ 
    tabBarLabel:&#39;首页&#39;, 
    tabBarIcon:({focused,tintColor}) => ( 
     <TabBarItem 
      tintColor={tintColor} 
      focused={focused} 
      normalImage={require(&#39;./imgs/nav_fav@2x.png&#39;)} 
      selectedImage={require(&#39;./imgs/nav_fav_actived@3x.png&#39;)} 
     /> 
    ) 
   }), 
  }, 
 
  Mine:{ 
     screen:MineScreen, 
     navigationOptions:({navigation}) => ({ 
     tabBarLabel:&#39;我&#39;, 
     tabBarIcon:({focused,tintColor}) => ( 
      <TabBarItem 
       tintColor={tintColor} 
       focused={focused} 
       normalImage={require(&#39;./imgs/tab_me_nor@3x.png&#39;)} 
       selectedImage={require(&#39;./imgs/tab_me_selected@2x.png&#39;)} 
      /> 
     ) 
    }), 
   }, 
  }, 
 
  { 
   tabBarComponent:TabBarBottom, 
   tabBarPosition:&#39;bottom&#39;, 
   swipeEnabled:false, 
   animationEnabled:false, 
   lazy:true, 
   tabBarOptions:{ 
    activeTintColor:&#39;#06c1ae&#39;, 
    inactiveTintColor:&#39;#979797&#39;, 
    style:{backgroundColor:&#39;#ffffff&#39;,}, 
    labelStyle: { 
       fontSize: 20, // 文字大小 
     }, 
   } 
    
  } 
 
 );

TabBarItem을 캡슐화된 구성요소로 정의:

import React,{Component} from &#39;react&#39;; 
import {Image} from &#39;react-native&#39;; 
 
export default class TabBarItem extends Component { 
 
  render() { 
    return( 
      <Image source={ this.props.focused ? this.props.selectedImage : this.props.normalImage } 
        style={ { tintColor:this.props.tintColor,width:25,height:25 } } 
      /> 
    ) 
  } 
   
}

보시다시피, 이름을 정의했습니다. [Tab]에 대한 TabNavigator의 탐색 구성 요소입니다. 구성 요소에서는 두 개의 매개 변수 계층으로 나뉩니다. (1) 매개 변수의 첫 번째 계층은 전환할 인터페이스, 즉 화면 속성을 통해 지정되는 두 개의 인터페이스 구성 요소인 [Home] 및 [Me]를 정의합니다. . 그리고 NavigationOptions 속성을 통해 관련 속성 매개변수를 설정합니다.

(2) 탐색 모음의 속성 매개변수를 설정합니다.

TabNavigator를 정의한 후에는 StackNavigator를 사용해야 합니다. 이름에서 알 수 있듯이 StackNavigator는 전체 인터페이스를 스택 형태로 저장하며

TabNavigator是作为一个界面内不同子界面之间切换。所以还需要我们定义StackNavigator：

const Navigator = StackNavigator( 
  
 { 
  Tab:{screen:Tab}, 
  Product:{screen:ProductScreen} 
 }, 
 
 { 
  navigationOptions:{ 
   headerBackTitle:null, 
   headerTintColor:&#39;#333333&#39;, 
   showIcon:true, 
   swipeEnabled:false, 
   animationEnabled:false, 
  }, 
 
  mode:&#39;card&#39;, 
 });

看起来和TabNavigator很相似，同样是指定了两个参数：

（1）指定要跳转的界面组件。同样是screen属性标识界面组件，不多赘述。

（2）定义跳转属性参数，即顶部导航栏的一些参数设置和跳转方式。

可以看到，我们将Tab作为一个界面设置到了StackNavigator。这样就可以实现Tab导航和界面间跳转的效果了。

最后就是在render中引用StackNavigator：

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

StackNavigator还提供了onNavigationStateChange回调方法，用来监听导航状态的改变。具体不再赘述。实现了界面跳转和切换，那么就该来增加下界面之间的感情了，来看看如何实现界面之间的传值和取值。

5、界面间跳转、传值、取值

在界面组件注入到StackNavigator中时，界面组件就被赋予了navigation属性，即在界面组件中可以通过【this.props.navigation】获取并进行一些操作。

navigation属性中提供了很多的函数简化界面间操作，简单列举几点：

（1）通过navigate函数实现界面之间跳转：

this.props.navigation.navigate(&#39;Mine&#39;);

参数为我们在StackNavigator注册界面组件时的名称。同样也可以从当前页面返回到上一页：

// 返回上一页 
this.props.navigation.goBack();

（2）跳转时传值：

this.props.navigation.navigate(&#39;Mine&#39;,{info:&#39;传值过去&#39;});

第一个参数同样为要跳转的界面组件名称，第二个参数为要传递的参数，info可以理解为key，后面即传递的参数。

（3）获取值：

{this.props.navigation.state.params.info}

通过state.params来获取传来的参数，后面为key值。此处为info。

以上实现完成，我们就可以愉快的玩耍啦~~ 什么？忽然发现在Android上的效果和IOS效果不一样。老板要界面一致哇~ 怎么办？那就需要我们进行简单的适配了。

三、DrawerNavigator实现抽屉导航

1、导航实现

API定义：DrawerNavigator（RouteConfigs，DrawerNavigatorConfig）

（1）界面中定义DrawerNavigator：

import {StackNavigator,TabNavigator,DrawerNavigator} from 'react-navigation'; 
import HomeScreen from './pages/HomePage'; 
import MineScreen from './pages/MinePage'; 
 
export default class Demo extends Component { 
 
 render() { 
    return ( 
     <Navigator /> 
    ); 
 } 
} 
 
const Navigator = DrawerNavigator({ 
 
  Home:{screen:HomeScreen}, 
  Mine:{screen:MineScreen}, 
}); 
 
const styles = StyleSheet.create({ 
 
  container: { 
    flex: 1, 
  }, 
}); 
 
AppRegistry.registerComponent('Demo', () => Demo);

定义方式和StackNavigator基本类似，不再赘述。

（2）HomeScreen界面和MineScreen界面：

export default class HomePage extends Component { 
 
  static navigationOptions = { 
    drawerLabel: &#39;首页&#39;, 
    drawerIcon:({tintColor}) => ( 
      <Image 
        source={require(&#39;./../imgs/ic_happy.png&#39;)} 
        style={[styles.icon, {tintColor: tintColor}]}/> 
    ), 
  }; 
 
  render() { 
    return( 
      <View style={{flex:1}}> 
        <Text onPress={this._skip.bind(this)}>点击跳转</Text> 
      </View> 
    ); 
  } 
 
  _skip() { 
    this.props.navigation.navigate("Mine"); 
  } 
} 
 
 
export default class MinePage extends Component { 
 
  static navigationOptions = { 
    drawerLabel:&#39;我&#39;, 
     drawerIcon: ({ tintColor }) => ( 
      <Image 
        source={require(&#39;./../imgs/ic_h.png&#39;)} 
        style={[styles.icon, {tintColor: tintColor}]} 
      /> 
    ), 
  }; 
 
  render() { 
    return( 
      <View style={{flex:1}}> 
        <Text onPress={this._skip.bind(this)}>返回上一界面</Text> 
      </View> 
    ); 
  } 
 
  /** 
   * 跳转 
   */ 
  _skip() { 
    this.props.navigation.goBack(); 
  } 
}

代码很简单，实现了界面之间的跳转。

2、扩展功能

（1）默认DrawerView不可滚动。要实现可滚动视图，必须使用contentComponent自定义容器，如下所示：

{ 
 drawerWidth：200， 
 抽屉位置：“对” 
 contentComponent：props => <ScrollView> <DrawerItems {... props} /> </ ScrollView> 
}

（2）可以覆盖导航使用的默认组件，使用DrawerItems自定义导航组件：

import {DrawerItems} from &#39;react-navigation&#39;; 
 
const CustomDrawerContentComponent = (props) => ( 
 <View style = {style.container}> 
  <DrawerItems {... props} /> 
 </View>  
);

（3）嵌套抽屉导航

如果您嵌套DrawerNavigation，抽屉将显示在父导航下方。

四、自定义react-navigation

（1）适配顶部导航栏标题：

测试中发现，在iphone上标题栏的标题为居中状态，而在Android上则是居左对齐。所以需要我们修改源码，进行适配。
【node_modules -- react-navigation -- src -- views -- Header.js】的326行代码处，修改为如下：

title: { 
  bottom: 0, 
  left: TITLE_OFFSET, 
  right: TITLE_OFFSET, 
  top: 0, 
  position: &#39;absolute&#39;, 
  alignItems: &#39;center&#39;, 
 }

上面方法通过修改源码的方式其实略有弊端，毕竟扩展性不好。还有另外一种方式就是，在navigationOptions中设置headerTitleStyle的alignSelf为 ' center '即可解决。

（2）去除返回键文字显示：

【node_modules -- react-navigation -- src -- views -- HeaderBackButton.js】的91行代码处，修改为如下即可。

{Platform.OS === &#39;ios&#39; && 
   title && 
   <Text 
    onLayout={this._onTextLayout} 
    style={[styles.title, { color: tintColor }]} 
    numberOfLines={1} 
   > 
    {backButtonTitle} 
   </Text>}

将上述代码删除即可。

（3）动态设置头部按钮事件：

当我们在头部设置左右按钮时，肯定避免不了要设置按钮的单击事件，但是此时会有一个问题，navigationOptions是被修饰为static类型的，所以我们在按钮的onPress的方法中不能直接通过this来调用Component中的方法。如何解决呢？在官方文档中，作者给出利用设置params的思想来动态设置头部标题。那么我们可以利用这种方式，将单击回调函数以参数的方式传递到params，然后在navigationOption中利用navigation来取出设置到onPress即可：

componentDidMount () { 
  /** 
   * 将单击回调函数作为参数传递 
   */ 
  this.props.navigation.setParams({ 
      switch: () => this.switchView() 
  }); 
}

/** 
 * 切换视图 
 */ 
switchView() { 
  alert(&#39;切换&#39;) 
}

static navigationOptions = ({navigation,screenProps}) => ({ 
  headerTitle: &#39;企业服务&#39;, 
  headerTitleStyle: CommonStyles.headerTitleStyle, 
  headerRight: ( 
    <NavigatorItem icon={ Images.ic_navigator } onPress={ ()=> navigation.state.params.switch() }/> 
  ), 
  headerStyle: CommonStyles.headerStyle 
});

（4）结合BackHandler处理返回和点击返回键两次退出App效果

点击返回键两次退出App效果的需求屡见不鲜。相信很多人在react-navigation下实现该功能都遇到了很多问题，例如，其他界面不能返回。也就是手机本身返回事件在react-navigation之前拦截了。如何结合react-natigation实现呢？和大家分享两种实现方式：

（1）在注册StackNavigator的界面中，注册BackHandler：

componentWillMount(){ 
  BackHandler.addEventListener(&#39;hardwareBackPress&#39;, this._onBackAndroid ); 
} 
 
 
componentUnWillMount(){ 
  BackHandler.addEventListener(&#39;hardwareBackPress&#39;, this._onBackAndroid); 
} 
 
_onBackAndroid=()=>{ 
  let now = new Date().getTime(); 
  if(now - lastBackPressed < 2500) { 
    return false; 
  } 
  lastBackPressed = now; 
  ToastAndroid.show(&#39;再点击一次退出应用&#39;,ToastAndroid.SHORT); 
  return true; 
}

（2）监听react-navigation的Router

/** 
 * 处理安卓返回键 
 */ 
const defaultStateAction = AppNavigator.router.getStateForAction; 
AppNavigator.router.getStateForAction = (action,state) => { 
  if(state && action.type === NavigationActions.BACK && state.routes.length === 1) { 
    if (lastBackPressed + 2000 < Date.now()) { 
      ToastAndroid.show(Constant.hint_exit,ToastAndroid.SHORT); 
      lastBackPressed = Date.now(); 
      const routes = [...state.routes]; 
      return { 
        ...state, 
        ...state.routes, 
        index: routes.length - 1, 
      }; 
    } 
  } 
  return defaultStateAction(action,state); 
};

（5）实现Android中界面跳转左右切换动画

react-navigation在Android中默认的界面切换动画是上下。如何实现左右切换呢？很简单的配置即可：

import CardStackStyleInterpolator from &#39;react-navigation/src/views/CardStackStyleInterpolator&#39;;

然后在StackNavigator的配置下添加如下代码：

transitionConfig:()=>({ 
  screenInterpolator: CardStackStyleInterpolator.forHorizontal, 
})

（6）解决快速点击多次跳转

当我们快速点击跳转时，会开启多个重复的界面，如何解决呢。其实在官方git中也有提示，解决这个问题需要修改react-navigation源码：

找到scr文件夹中的addNavigationHelpers.js文件,替换为如下文本即可：

export default function<S: *>(navigation: NavigationProp<S, NavigationAction>) { 
 // 添加点击判断 
 let debounce = true; 
 return { 
   ...navigation, 
   goBack: (key?: ?string): boolean => 
     navigation.dispatch( 
       NavigationActions.back({ 
         key: key === undefined ? navigation.state.key : key, 
       }), 
     ), 
   navigate: (routeName: string, 
         params?: NavigationParams, 
         action?: NavigationAction,): boolean => { 
     if (debounce) { 
       debounce = false; 
       navigation.dispatch( 
         NavigationActions.navigate({ 
           routeName, 
           params, 
           action, 
         }), 
       ); 
       setTimeout( 
         () => { 
           debounce = true; 
         }, 
       500, 
       ); 
       return true; 
     } 
     return false; 
   }, 
  /** 
   * For updating current route params. For example the nav bar title and 
   * buttons are based on the route params. 
   * This means `setParams` can be used to update nav bar for example. 
   */ 
  setParams: (params: NavigationParams): boolean => 
   navigation.dispatch( 
    NavigationActions.setParams({ 
     params, 
     key: navigation.state.key, 
    }), 
   ), 
 }; 
}

五、效果图

抽屉导航：