React Navigation 사용 시 주의사항은 무엇인가요?

이번에는 React Navigation 사용 시 주의사항에 대해 알려드리겠습니다., React Navigation 사용 시 주의사항은 무엇인지, 다음은 실제 사례로 살펴보겠습니다.

React Native 개발 과정에서 React Navigation 프레임워크를 사용할 때 많은 문제에 직면했습니다. 주로 안드로이드와 iOS의 상대적인 비호환성으로 인해 기록합니다

1. 네비게이션 바

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

1. 하단에 검은색 선이 있습니다 the Navigation bar

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

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

에 코드를 설정한 후 제거할 수 있습니다. 2. android에서 바 하단에 그림자가 있고, 맞춤 바 배경 이미지를 채울 수 없습니다

리액트 내비게이션 바에 Android에서는 기본적으로 높이가 있습니다. 시각적 효과는 하단에 그림자가 있다는 것입니다. 그리고 또 다른 골치 아픈 효과는 배경 이미지가 있는 사용자 정의 Bar를 사용할 때입니다. 배경 이미지가 불완전한 적용 범위의 효과를 가지고 있음을 알 수 있습니다. 측면에는 항상 약간의 간격이 있습니다. 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 Bar의 paddingTop 속성을 상태 표시줄 높이로 설정해야 합니다

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

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

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

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

그러나 onPress 메소드의 경우 이를 사용해야 합니다. 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 구성 요소를 npm에 게시하는 단계 분석

위 내용은 React Navigation 사용 시 주의사항은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!