반응 탐색 방법을 사용하는 방법

react 네비게이션은 등록된 모든 라우팅 페이지의 props에 네비게이션을 삽입합니다. 사용 방법: 1. "const Main = createStackNavigator({...})"를 통해 기본 경로를 생성합니다. 2. "를 통해 하단 라벨을 생성합니다. 3. "createSwitchNavigator"를 통해 특수 스위치 경로 등을 생성합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응 탐색 방법을 사용하는 방법은 무엇입니까?

react-navigation 일반적인 방법

react-navigation은 rn 프로젝트가 라우팅 기록 관리를 제공하는 것 외에도 네비게이터를 위한 UI 구성 요소도 제공한다는 것입니다. ;

react-navigation은 등록된 모든 경로 페이지의 props에 탐색을 삽입합니다!!!

1. 기본 경로를 생성합니다.

createStackNavigator

여기에는 기본적으로 프로젝트에 사용되는 모든 페이지 경로가 포함됩니다. 하단 탭 표시줄을 만듭니다.

createBottomTabNavigator

즉, 앱 홈페이지 하단에 여러 탭이 있습니다.

const Main = createStackNavigator({
    Tab: {
        screen: Tab,
        navigationOptions:{
            header:null
        }
    }
     。。。
},{
    initialRouteName :'Tab',   
})

3. 점프하기 전 페이지는 기록 스택에 들어가지 않습니다. 상단 탭 페이지 태그가 탐색 모음 위치를 차지합니다

const Tab = createBottomTabNavigator({
    Home: {
        screen: Home,
        navigationOptions:{
            header:null,
            title:'最热',
            tabBarIcon:({focused,tintColor})=>{
                return (
                    <MCIcon name="chili-hot"  size={16} color = {focused?tintColor:&#39;#404040&#39;}></MCIcon>
                )
            }    
        }
    },
   。。。
},{
    initialRouteName :&#39;Home&#39;,
    tabBarOptions:{
        activeTintColor:&#39;#1d85d0&#39; 
    }
})

5. NavigationOptions 일반적으로 사용되는 구성 속성

headerTtile: 페이지 제목

headerTitleStyle: 제목 텍스트의 스타일

headerStyle: 전체 제목 블록의 스타일

6. 탭 부분의 참조 속성

createSwitchNavigator
//欢迎页跳转不可返回
const Navigation = createSwitchNavigator({
    Init:Init,
    Main:Main
},{
    initialRouteName :'Init'
})

BottomTabBar 구성 요소도 이 속성을 사용할 수 있습니다

7. 반환 기능 만들기

보통 탐색 소품을 가져오기 위해 반환해야 하는 페이지에서 this.props.navigation을 사용합니다.

createMaterialTopTabNavigator
export default class Home extends Component {
  render() {
    const TabNav = createMaterialTopTabNavigator({
      Tab1:{
        screen: Tab1,
        navigationOptions:{
            title:'tab1',
            header:null
        }
      }
。。。
   
    },{。。。}) 
    return (
      <TabNav/>
    ) 
  }
}

를 사용하여 페이지를 반환할 수 있지만 이에 대한 전제 조건은 this.props.navgation이 현재 페이지의 탐색이어야 한다는 것입니다. 즉, this.props.navigation.state.routeName을 확인할 수 있습니다. 판단 방법:

Android 반환 키 반환과 같은 일부 특수한 경우 롤백 이벤트 BackHandler가 위쪽으로 전달되고 this.props.navigation이 위쪽으로 전달될 수 있으므로 이 페이지에서 반환 이벤트가 캡처되지 않는 것으로 판단됩니다. 롤백해야 하는 탐색 개체가 아니므로 go.Back()이 사용되었습니다. 성공하지 못하거나 어떤 경우에는 탐색 개체에 goBack() 메서드가 없어도 이 문제가 발생합니다. ;

예를 들어

홈 페이지는 2차 경로이고 두 페이지 모두 설정되어 있습니다. 세부 사항의 BackHandler가 현재 캡처되지 않은 경우; 페이지의 경우 홈의 BackHandler 콜백 함수로 전달되고 홈의 this.props.navigation은 세부 정보가 아닌 홈 페이지를 참조하므로 goBack 호출도 성공하지 못합니다. ! !

해결 방법:

NavigationActions를 사용하세요. 모든 NavigationActions는 Navigation.dispatch() 메서드를 사용하여 라우터로 보낼 수 있는 개체를 반환합니다.

다음 작업을 지원합니다:

Navigate - 다른 경로로 이동

Back - 이전 상태로 돌아가기

Set Params - 주어진 경로에 대한 매개변수 설정

Init - 상태가 다음과 같은 경우 첫 번째 경로를 초기화하는 데 사용됩니다. 정의되지 않은 상태

자세한 내용은 문서를 참조하세요. https://reactnavigation.org/docs/zh-Hans/navigation-actions.html

다음을 전달하여 반환 작업을 수행할 수 있습니다.

tabBarOptions - 具有以下属性的对象:
activeTintColor -活动选项卡的标签和图标颜色。
activeBackgroundColor -活动选项卡的背景色。
inactiveTintColor -"非活动" 选项卡的标签和图标颜色。
inactiveBackgroundColor -非活动选项卡的背景色。
showLabel -是否显示选项卡的标签, 默认值为 true。
showIcon - 是否显示 Tab 的图标，默认为false。
style -选项卡栏的样式对象。
labelStyle -选项卡标签的样式对象。
tabStyle -选项卡的样式对象。
allowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置，默认值都是 true。
safeAreaInset - 为 <SafeAreaView> 组件重写 forceInset prop， 默认值：{ bottom: &#39;always&#39;, top: &#39;never&#39; }； top | bottom | left | right 的可选值有： &#39;always&#39; | &#39;never&#39;。

참고:

dispatch() 메서드는 this.props.navigation

에 있습니다. 권장 학습: "

react 비디오 튜토리얼

"

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