전단 RN 루트 입문 부터 실전 까지
18853 단어 react-routerreact-native
1.1 머리말
오늘 의 화 제 를 시작 하기 전에 먼저 전단 경 로 를 알 아 보 겠 습 니 다. Ajax 가 탄생 한 후에 매번 사용자 작업 이 서버 측 에 전체 페이지 를 다시 닦 아 달라 고 요청 하 는 문 제 를 해 결 했 습 니 다. 그러나 이에 따 른 문 제 는 Ajax 작업 상 태 를 저장 할 수 없고 브 라 우 저의 전진 후퇴 기능 도 사용 할 수 없습니다. 현재 유행 하 는 두 가지 해결 방법 은:
history 를 이전 페이지 로 되 돌 릴 수 있 을 뿐만 아니 라 이전 작업 상태 로 돌아 갈 수 있 도록 합 니 다.HTML 5 는 세 가지 방법 을 추 가 했 는데 그 중 두 가 지 는 history 대상 에 있 습 니 다.
1.4. window 에서 새로 추 가 된 방법
window. onpoptate () 감청 url 의 변 화 는 hash 의 변 화 를 무시 합 니 다 (hash 변화 에 onhashchange 이벤트 가 있 습 니 다). 그러나 앞의 두 사건 은 촉발 되 지 않 습 니 다.
요약:
단일 페이지 응용 프로그램 이나 Ajax 작업 기록 상 태 는 hash 와 h5 가 증가 하 는 history API 를 사용 합 니 다. 이것 이 바로 react - router - dom 확장 경로 입 니 다. 이것 은 웹 응용 에서 가장 자주 사용 하 는 두 가지 경로 입 니 다.
1.5. react 경로
//
import ReactDom from 'react-dom';
import { Router, Route, hashHistory,IndexRoute} from 'react-router';
//
ReactDom.render(
,document.getElementById("app"));정적 경로
react 프로젝트 를 시작 할 때 사용자 가 좋 은 경로 표 가 되 고 페이지 가 이동 할 때 react 는 주소 에 따라 경로 표 에서 해당 하 는 처리 페이지 나 처리 방법 을 찾 습 니 다.
동적 경로
동적 루트 는 프로젝트 가 실행 중인 프로필 로 외부 에 저장 되 는 것 이 아니 라 프로젝트 render 에서 정 의 됩 니 다. 루트 작성 자 는 루트 가 다른 일반 구성 요소 와 마찬가지 로 루트 설정 을 제공 하 는 것 이 아니 라 일반적인 UI 구성 요소 라 고 생각 합 니 다.
React Native 경로
2.1 RN 에서 react - router 사용 시도
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { StatusBarIOS,Platform } from 'react-native';
import { createMemoryHistory, Router, IndexRoute, Route } from 'react-router';
import { createNavigatorRouter } from 'react-native-navigator-router';
React Native 버 전 으로 0.44 까지 설계 한 후에 원래 의 RN 경로 가 완전히 효력 을 잃 었 다.
실행 중 오류 보고, createMemory History ('/') 이상
구체 적 인 원인 은 잘 모 르 겠 습 니 다. react - router 의 사용 방식 을 제거 한 것 같 습 니 다. 현재...
2.2、RN Navigator
우선 원리 적 으로 Navigator 는 구성 요소 간 의 네 비게 이 션 으로 사용 된다.라 우 터 와 유사 한 것 이 없 을 때 가장 쉬 운 방법 은 다음 구성 요소 (장면 Scene 이 라 고도 함) 를 네 비게 이 션 에 직접 알려 주 는 것 이다.그래서 페이지 위 에 다음 구성 요 소 를 도입 해 야 합 니 다.
export default class SampleComponent extends React.Component {
render() {
let defaultName = 'FirstPageComponent';//
let defaultComponent = FirstPageComponent;
return (
{
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return
}} />
);
}
}
initial Route = {{name: defaultName, component: defaultComponent}} Navigator 를 통 해 점프 를 실현 합 니 다. Push 와 Pop 방법 을 통 해 하나의 배열 에 해당 합 니 다. 다음 장면 으로 넘 어 갈 때마다 다음 페이지 를 이 배열 로 Push 하고 뒤로 물 러 나 려 면 이 Pop 을 나 갑 니 다.
react - native 0.44 부터 Navigatior 를 지원 하지 않 습 니 다.
2.3、iOS NavigatorIOS
NavigatorIOS 사용
1. 루트 보기
우선 NavigatorIOS 의 루트 보기 로 홈 구성 요 소 를 만 듭 니 다.
보기 부분:
render() {
return (
);
}스타일 부분:
const styles = StyleSheet.create({
flex: {
flex: 1,
marginTop: 65
},
listItem: {
height: 40,
marginLeft: 10,
marginRight: 10,
borderBottomWidth: 1,
borderBottomColor: "#ddd",
justifyContent: "center"
},
listItemFont: {
fontSize: 16
},
container: {
justifyContent: "center",
alignItems: "center"
}
});2. 예화 경로 설정
그리고 NavigatorIOS 를 실례 화하 고 경 로 를 설정 합 니 다.
class Test extends Component {
render() {
return (
);
}
} 3. 효과
4. 점프 와 귀환
return (
{this.props.navigator.push({
component:Detail, //
title:' ' //
rightButtonTitle: " ",//
onRightButtonPress: function() {//
alert(" 。");
}
})}}
>
);
5. 전체적인 효과
react-navigation
인용
앞에서 소개 한 몇 가지 경로 방식 은 RN 버 전 업데이트 에 따라 더 이상 지원 되 지 않 거나 단일 플랫폼 지원 성 이기 때 문 입 니 다.RN 공식 은 0.44 버 전 이후 네 비게 이 션 경 로 를 react - navigation 라 이브 러 리 에 집중 시 켰 고 공식 적 으로 도 react - navigation 을 사용 하여 제3자 플러그 인 을 적 게 사용 했다.
react - navigation 추가
이 라 이브 러 리 는 세 가지 구성 요 소 를 포함 합 니 다:
npm install --save react-navigation방법 참조:
import { StackNavigator } from "react-navigation";3.1、StackNavigator
구성 요 소 는 스 택 식 페이지 내 비게 이 션 을 사용 하여 각 인터페이스 전환 을 실현 합 니 다.그것 의 구조 함수:
StackNavigator(RouteConfigs, StackNavigatorConfig)
RouteConfigs：
StackNavigatorConfig： 3.1.1 StackNavigator 파라미터
navigationOptions： StackNavigator 。
title： ， title ，
header： ， null
headerTitle： ，
headerBackTitle： ， 。 ， null
headerTruncatedBackTitle： ， " "
headerRight： 。
headerLeft： 。
headerStyle： 。 ，
headerTitleStyle：
headerBackTitleStyle： ‘ ’
headerTintColor：
headerPressColorAndroid： ， 5.0
gesturesEnabled： ，iOS ，
screen： ， import
mode：
card： iOS
modal：iOS 。 iOS present
headerMode：
float：iOS
screen： ，
none：
cardStyle：
transitionConfig：
onTransitionStart：
onTransitionEnd： ，
path：
initialRouteName： ，
initialRouteParams： 3.1.2, RouteConfigs 설정
RouteConfigs 파라미터 RouteConfigs 파라미터 만 설정 할 수 있 습 니 다. 각 페이지 의 경로 설정 을 표시 합 니 다. React 개발 중인 Router 경로 설정 은 네 비게 이 션 이 필요 한 경로 에 대응 하 는 페이지 임 을 네 비게 이 션 에 알 릴 수 있 습 니 다.
RN 페이지 경로 설정:
const AppIndex = StackNavigator(
{
Task: {
screen: Task，
// navigationOptions
navigationOptions: ({ navigation }) => ({
headerTitle: " ",
headerBackTitle: null
})
},
NewTask: {
screen: NewTask
},
Redeem: {
screen: Redeem
},
Rule: {
screen: Rule
}
}
);3.1.3 경로 전환
네 비게 이 션 과 대응 하 는 경로 페이지 가 설정 되 어 있 지만 페이지 간 의 점프 를 완성 하려 면 navigation 이 필요 합 니 다.
내 비게 이 션 의 모든 페이지 에는 navigation 속성 이 있 습 니 다.
navigationOptions ， Redeem
（ ： static navigationOptions ）
class Redeem extends Component {
static navigationOptions = ({ navigation }) => ({
headerTitle: `${navigation.state.params.title}`,
headerRight: (
navigation.state.params ? navigation.state.params.jumpToRule() : null
}>
)
});
.....
}
navigationOptions ， ， 3.1.4 네 비게 이 션 속성
navigate - 다른 페이지 로 이동
이 방법 을 사용 하면 네 비게 이 션 의 다른 페이지 로 이동 할 수 있 습 니 다. 이 방법 은 세 개의 인자 가 있 습 니 다.
우선 페이지 를 넘 어야 할 곳 에 navigate 를 설명 합 니 다.
const { navigate } = this.props.navigation;
그리고 이벤트 클릭 을 통 해 navigate 점프 를 호출 합 니 다.
//
navigate("Redeem", { title: " " })}>
//
jumpToRule = () => {
const { navigate } = this.props.navigation;
navigate("Rule", { title: " " });
}state - 현재 페이지 탐색 기의 상태
state 에는 전 달 된 인자 params, key, 경로 이름 route 가 포함 되 어 있 습 니 다 Name
{
params: { param: 'i am the param' },
key: 'id-1500546317301-1',
routeName: 'Redeem'
}사용:
headerTitle: `${navigation.state.params.title}`setParams - 경로 변경 인자
현재 페이지 경로 의 인 자 를 변경 합 니 다. 예 를 들 어 머리 단추 나 제목 을 업데이트 할 수 있 습 니 다.
setParams 사용:
//
headerRight: (
navigation.state.params ? navigation.state.params.jumpToRule() : null
}>
)설명:
내 비게 이 션 표시 줄 의 단 추 를 누 르 면 이 방법 을 호출 해 야 할 때 this. jumpToRule () 을 직접 사용 할 수 없습니다. 주기 적 인 componentDidMount 에서 navigation 의 setParams 를 통 해 함 수 를 내 비게 이 션 에 등록 해 야 합 니 다.
componentDidMount() {
this.props.navigation.setParams({ jumpToRule: this.jumpToRule });
}goBack - 복귀, 후퇴.
전송 하지 않 아 도 되 고 인 자 를 전달 할 수도 있 으 며 null 도 전송 할 수 있 습 니 다.
this.props.navigation.goBack(); // 이전 페이지 로 되 돌아 가기
this.props.navigation.goBack(null); // 임의의 페이지 로 되 돌아 가기
this.props.navigation.goBack('Home'); // 홈 페이지 로 돌아 가기
dispatch - action 보 내기
3.2、TabNavigator
구성 요 소 는 스 택 식 페이지 내 비게 이 션 을 사용 하여 각 인터페이스 전환 을 실현 합 니 다.그것 의 구조 함수:
TabNavigator(RouteConfigs, TabNavigatorConfig)
RouteConfigs： tab
TabNavigatorConfig： 3.2.1 매개 변수 설정
screen： ， ， screen 。
navigationOptions： TabNavigator
title： ， title
tabBarVisible： 。 (true)
tabBarIcon： 。
tabBarLabel： title。
tabBarPosition： tabbar ，iOS ， 。（ ：'top'，'bottom'）
swipeEnabled：
animationEnabled：
lazy： ， ， app ， false, true
trueinitialRouteName：
backBehavior： back Tab( )， none
tabBarOptions： iOS
activeTintColor：label icon
activeBackgroundColor：label icon
inactiveTintColor：label icon
inactiveBackgroundColor：label icon
showLabel： label， style：tabbar
labelStyle：label
activeTintColor：label icon
inactiveTintColor：label icon
showIcon： ，
showLabel： label， style：tabbar
labelStyle：label upperCaseLabel： ， true
pressColor：material （ 5.0）
pressOpacity： （ 5.0）
scrollEnabled： tabStyle：tab
indicatorStyle： （ ）。 ， height 0
labelStyle：label
iconStyle： 필요 한 구성 요소 가 져 오기:
import { TabNavigator } from "react-navigation";
import Home from "./category/Home";
import Feedback from "./category/feedback/feedback";정의 TabNavigator:
const MyTab = TabNavigator(
{
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
headerTitle: " ",
tabBarLabel: " ",
headerBackTitle: null
})
},
Feed: {
screen: Feedback,
navigationOptions: ({ navigation }) => ({
headerTitle: " ",
tabBarLabel: " ",
headerBackTitle: null,
})
}
},
{
tabBarComponent: TabBarBottom,
tabBarPosition: "bottom", // tabbar ，iOS ， 。（ ：'top'，'bottom'）
swipeEnabled: true, //
animationEnabled: false, //
lazy: true, // ， ， app ， false, true
tabBarOptions: {
activeTintColor: "#ff552e", //label icon （ ）
// activeBackgroundColor:'blue',//label icon
inactiveTintColor: "#333", //label icon
showLabel: true, // label，
showIcon: true, // android icon, true
style: { backgroundColor: "#ffffff" }, //tabbar
labelStyle: {
fontSize: 14 //
}
}
}
);3.3 페이지 내 비게 이 션 과 페이지 전환 혼합 사용
const MyTab = TabNavigator(
{
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
headerTitle: " ",
tabBarLabel: " ",
headerBackTitle: null,
tabBarIcon: ({ tintColor }) => (
![]()
)
})
},
Feed: {
screen: Feedback,
navigationOptions: ({ navigation }) => ({
headerTitle: " ",
tabBarLabel: " ",
headerBackTitle: null,
headerRight: (
navigation.state.params ? navigation.state.params.submit() : null
}>
),
tabBarIcon: ({ tintColor }) => (
![]()
)
})
}
},
{
tabBarComponent: TabBarBottom,
tabBarPosition: "bottom", // tabbar ，iOS ， 。（ ：'top'，'bottom'）
swipeEnabled: true, //
animationEnabled: false, //
lazy: true, // ， ， app ， false, true
tabBarOptions: {
activeTintColor: "#ff552e", //label icon （ ）
// activeBackgroundColor:'blue',//label icon
inactiveTintColor: "#333", //label icon
showLabel: true, // label，
showIcon: true, // android icon, true
style: { backgroundColor: "#ffffff" }, //tabbar
labelStyle: {
fontSize: 14 //
}
}
}
);
const AppIndex = StackNavigator(
{
Main: {
screen: MyTab
},
Task: {
screen: Task
},
NewTask: {
screen: NewTask
},
Redeem: {
screen: Redeem
},
Rule: {
screen: Rule
},
Test: {
screen: Test
}
},
{
initialRouteName: "Task", //
navigationOptions: {
headerTitle: " ",
headerBackTitle: null,
// headerBackTitle: " ",
headerTintColor: "#333",
cardStack: {
gesturesEnabled: true // ， iOS true， Android false
}
},
// mode: "card", // , card( iOS push ), modal( iOS modal )
headerMode: "screen", // , screen: , float: , none:
onTransitionStart: () => {}, //
onTransitionEnd: () => {} //
}
);이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【초보자용】React-Redux로 ToDo 앱을 만들어 보았다다양한 기능을 추가해 보았습니다. · 로그인 기능 구현 또한 이번에는 React-Redux와 Hooks를 사용하여 구축을 해 보았습니다. 다음에 살려 가고 싶습니다! ~로그인 전~ SemanticUI의 아이콘으로 G...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
