React Navigation 사용 사례 분석

이번에는 React Navigation 사용 사례 분석을 가져오겠습니다. React Navigation 사용 시 주의 사항은 무엇인가요?

1. 네비게이션 바

네비게이션 바를 사용할 때 다음과 같은 문제가 발생했습니다

1 네비게이션 바 하단에 검은색 선이 있습니다

원래 페이지를 생성하려는 의도입니다. 막대의 색상은 페이지의 색상과 일치합니다. 상단에 두 개의 다른 버튼이 있는 경우에만 해당됩니다. 바 하단에 검은색 선이 발견되었습니다. 결과적으로 막대가 원하는 페이지 효과와 잘 일치하지 않습니다. 헤더에 코드 설정 후 제거 가능

static navigationOptions = {
 ...
 headerStyle: {
    ...
    borderBottomWidth: 0,
  },
 }

2. 안드로이드 바 하단에 그림자가 있어 커스텀 바 배경 이미지를 채울 수 없습니다

리액트 네비게이션 바의 높이가 다음과 같습니다. 안드로이드에서는 기본값입니다. 시각적 효과는 하단에 그림자가 있다는 것입니다. 그리고 또 다른 골치 아픈 효과는 배경 이미지가 있는 사용자 정의 바를 사용할 때입니다. 배경 이미지가 불완전한 적용 범위의 효과를 가지고 있음을 알 수 있습니다. 측면에는 항상 약간의 간격이 있습니다. iOS에서는 이 문제가 발생하지 않습니다. 이 문제는 고도 속성을 0으로 설정하면 해결됩니다

 static navigationOptions = {
 ...
 headerStyle: {
    ...
    elevation: 0,
  },
 }

3. 안드로이드에서 바 제목을 중앙에 맞추는 문제

안드로이드에서는 바 제목이 왼쪽 중앙에 있습니다. iOS는 기본적으로 중앙에 위치합니다. 왼쪽에 버튼이 없을 때 다음 쓰기 방법을 사용하여

static navigationOptions = {
 ...
 headerTitleStyle: {
    //此属性是标题的Style属性。可以接受<Text>标签的style
    ...
    alignSelf: "center",
  },
 }

를 중앙에 배치할 수 있습니다. 이 정도만 써도 충분합니다. 하지만 왼쪽에 리턴 키나 기타 사용자 정의 키가 있는 경우. 제목은 Android에서 오프셋됩니다. 해결책은 오른쪽에 빈 버튼을 추가하는 것입니다

static navigationOptions = {
 ...
 headerRight: <View />
 }

4. 배경 이미지가 있는 탐색 모음

은 Yuansheng과 다릅니다. 반응 탐색 모음에는 배경 이미지 속성이 없습니다. 즉, 배경 이미지와 함께 탐색 모음을 사용하려면 사용자 정의 보기를 사용해야 합니다.

import {Header} from "react-navigation";
//header 需导入
const ImageHeader = props => (
  <View>
    <Image
      style={{position: "absolute", zIndex: -1, width: "100%", height: "100%", resizeMode: "cover"}}
      source={require(...)}
    />
    <Header {...props} style={{backgroundColor: "transparent"}} />
  </View>
);
static navigationOptions = {
 ...
 headerStyle: {
   //背景颜色必须为透明，不然无法透出底部图片
   backgroundColor: "transparent",
   //安卓中不添加此属性会导致背景图无法铺满
   elevation: 0,
 },
  header: props => {
    return <ImageHeader {...props} />;
  },
 }

5. StackNavigator가 DrawerNavigator와 중첩될 때 제스처 충돌 문제가 발생합니다.

DrawerNavigator가 StackNavigator에 중첩될 때. StackNav의 보조 인터페이스에 들어간 후 복귀 동작이 DrawerNav 메뉴를 여는 것과 충돌합니다.

static navigationOptions = {
 ...
 //禁止打开菜单
 drawerLockMode: "locked-closed", 
 //允许使用返回手势
 gesturesEnabled: true,
 }

이 설정은 필요에 따라 수정할 수 있습니다

5.Navgation Bar 높이 불일치 문제

사용자 정의 Bar를 사용할 때. 안드로이드와 iOS는 매우 불일치합니다. Android는 휴대폰 상단에서 탐색 높이를 계산합니다. 기본적으로 iOS는 상태 표시줄의 높이를 아래쪽으로 오프셋합니다. 균일한 효과를 얻으려면. Android 바의 paddingTop 속성을 상태 표시줄 높이로 설정해야 합니다

import {StatusBar, Platform} from "react-native";
navigationOptions = {
 ...
 headerStyle: {
   ...
   paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight,
  },
 }

6. 탐색 바에서 맞춤 버튼을 사용하세요

버튼이나 보기를 맞춤설정하려면 headerRight 또는 headerLeft를 사용하세요

static navigationOptions = {
 ...
 headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={...}>
        <Text style={styles.NavSureButton}>btn</Text>
      </TouchableOpacity>)
 }

onPress 메소드를 사용해야 합니다. this.props, this.state 또는 클래스의 다른 메소드로 이동할 때 문제가 발생합니다. 각 페이지의 클래스에서는 static NavigationOptions={...}를 사용하여 일부 탐색 구성을 구성합니다. 하지만 static으로 수정되는 속성은 클래스의 정적 속성에 속하기 때문입니다. 이 속성 메서드를 호출할 수 없습니다. 따라서 헤더 버튼의 클릭 이벤트를 설정하려면 this.props.navigation.setParams({key:value ...}) 메서드를 사용해야 합니다.

class Demo extends React,Component{
 componentWillMount() {
  //绑定方法
  this.props.navigation.setParams({rightOnPress: this.rightBtnOnPress});
 }
 //点击方法
 rightBtnOnPress = ()=>{
  ...
 }
  static navigationOptions = ({navigation}) => {
    const params = navigation.state.params || {};
    let navigationOptions = {
    ...
    headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={params.rightOnPress}>
        <Text style={styles.NavSureButton}>btn</Text>
      </TouchableOpacity>)
    }
    return navigationOptions;
  };
  ...
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue를 사용하여 2048 미니 게임을 구현하는 방법

Vue에서 vee-validate를 사용하는 방법

위 내용은 React Navigation 사용 사례 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!