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:'#404040'}></MCIcon> ) } } }, 。。。 },{ initialRouteName :'Home', tabBarOptions:{ activeTintColor:'#1d85d0' } })
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: 'always', top: 'never' }; top | bottom | left | right 的可选值有: 'always' | 'never'。
참고:
dispatch() 메서드는 this.props.navigation
에 있습니다. 권장 학습: "
react 비디오 튜토리얼"
위 내용은 반응 탐색 방법을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!