개발 시 반응 탐색 사용 소개

이 글에서 공유한 내용은 개발 시 React-Navigation 사용에 대한 소개입니다. 도움이 필요한 친구들이 참고할 수 있습니다.

Daily nonsense

react-navigation은 반응 커뮤니티의 탐색 솔루션입니다. 나의 월선배 경험으로 볼 때, react-native는 앱 개발에 필수적인 라이브러리 중 하나라고 해도 과언이 아닙니다. react-native开发app必备库之一毫不过分。

在开发过程中，不同页面因为不同的业务需求会有不同的头部(header)，这篇文章针对几种常用我遇到过的各种header提供对应的react-navigation解决方案。

我是正文

底部tab对app来说是十分常见的需求。react-navigation也提供了相应的API来创建底部tab： createBottomTabNavigator

如何定制tab页的header呢？ 我们分情况讨论：

所有tab页都要header

很简单，无需额外的配置。

所有tab页都不要header

第一时间可能会想到的是在createBottomTabNavigator中对每个页面的navigationOptions对象设置header为null。

createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        header: null // 无效！！
      }
    }
  }
)

但实际上createBottomTabNavigator中的navigationOptions对象是不接受header参数的，至少文档中没写。官方文档

解决方式：在根级导航中设置。

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator, // TabNavigator就是通过createBottomTabNavigator创建的底部导航
      navigationOptions: {
        header: null
      }
    }
    // other pages
  }
)

只有某个tab要header

其实navigator是可以互相嵌套的。 就像上面的例子中，Main路由的页面是createBottomTabNavigator创建的底部导航。同理，底部导航中某个tab的页面也可以是导航页。有点绕，还是看代码

const bottomTabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        // some options
      }
    },
    User: { // user页要"头"~
      screen: createStackNavigator(
        User: {
          screen: User,
          navigationOptions: {
            header: customHeader
          }
        }
      )
    }
  }
)

const appNavigator = createStackNavigator(
  {
    Main: {
      screen: bottomTabNavigator,
      navigationOptions: {
        header: null // 这里要将bottomTabNavigator的header设为null
      }
    },
    Other: {
      screen: Other
    }
  }
)

因为默认情况下bottomTabNavigator会有一个自己的header，而user我们又创建了一个带header的路由页面，所以我们将Main路由（bottomTabNavigato）的header设为null，如果不设置的，页面会有2个header哦，小伙伴可自行尝试。

某tab页不要header or 需要定制header

如果我只有某个tab页不要header，咋办？
还是从navigationOptions入手，navigationPptions属性可以是一个接受navigation对象，返回一个新对象的函数。

关于navigation对象，可以看官方文档

这里我们用到了该对象的state属性。

现在我们有如下导航配置：

const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        title: '首页'
      }
    },
    Phone: {
      screen: createStackNavigator(
        {
          Phone: {
            screen: Phone,
            navigationOptions: ({ navigation }) => (
              { // phoneHeader为自定义React组件
                header: <PhoneHeader navigation={navigation}/>
              }
            )
          }
        }
      ),
      navigationOptions: {
        tabBarVisible: false,
        title: '机型'
      }
    },
    User: {
      screen: User,
      navigationOptions: {
        title: '我的'
      }
    }
  }
)

上面代码创建了包含3个tab的底部导航，其中phone的header是定制的。接下去我们要做的是配置在appNavigator中配置TabNavigator的navigation属性，根据不同的路由使用不同的header(即当处在home页或是user页时候，使用默认的header，当处在phone页面时，移除header。

为什么是移除header?

因为phone页面已经自定义了header，我们只需移除外层TabNavigator的header即可。如果不然，会有2个header（TabNavigator和phone2个header）。这个上面已经提到。另外，也可以将定制的header配置在appNavigator中TabNavigator的navigation

개발 과정에서 비즈니스 요구 사항이 다르기 때문에 페이지마다 헤더가 다를 수 있습니다. 이 문서에서는 제가 접한

자주 사용되는 여러 헤더에 대한 대응 탐색 을 제공합니다.

내가 본문입니다하단의 탭은 앱에서 매우 일반적인 요구사항입니다. react-navigation은 하단 탭을 생성하기 위한 해당 API도 제공합니다: createBottomTabNavigator

탭 페이지 헤더를 사용자 정의하는 방법은 무엇입니까? 사례별로 논의해 보겠습니다.

모든 탭 페이지에는 헤더가 필요합니다.

매우 간단하고 추가 구성이 필요하지 않습니다.

모든 탭 페이지에 헤더가 없습니다

가장 먼저 생각할 수 있는 것은 createBottomTabNavigator >headernavigationOptions 개체를 설정하는 것입니다. /코드>가 null입니다.

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator,
      navigationOptions: ({ navigation }) => {
        const titleMap = {
          Home: '首页',
          User: '我的'
        }
        // 根据路由的顺序以及路由名定义title
        const result = {
          title: titleMap[navigation.state.routes[navigation.state.index].routeName],
          headerTitleStyle: {
            fontWeight: '600',
            color: color.gray_1,
            fontSize: px2p(18)
          },
          headerBackTitle: null
        }
        // 在配置TabNavigator时，phone页面是第一个定义的(zero-indexed)。
        // 所以当index为1的时，header设为null
        // 或者将header设为自定义header，对应修改TabNavigator中phone。
        if (navigation.state.index === 1) { 
          result.header = null
          result.headerTransparent = true
        }
        return result
      }
    },
    ...pages // 其他页面
  },
  {
    initialRouteName: 'Main'
  }
)

🎜그러나 실제로 createBottomTabNavigator의 navigationOptions 개체는 header 매개변수를 허용하지 않습니다. 적어도 문서에는 기록되지 않습니다. 공식 문서🎜🎜해결책: 루트 수준 탐색에서 설정하세요. 🎜rrreee

특정 탭에만 헤더가 필요합니다

🎜실제로 네비게이터는 서로 중첩될 수 있습니다. 위의 예와 마찬가지로 기본 경로 페이지는 createBottomTabNavigator에 의해 생성된 하단 탐색입니다. 마찬가지로 하단 네비게이션의 특정 탭의 페이지도 네비게이션 페이지가 될 수 있습니다. 조금 복잡합니다. 코드를 살펴보겠습니다. 🎜rrreee🎜기본적으로 BottomTabNavigator에는 자체 헤더가 있고 사용자는 헤더가 있는 라우팅 페이지를 만들었으므로 Main 경로(bottomTabNavigato)를 지정합니다. 헤더를 null로 설정하세요. 설정하지 않으면 페이지에 2개의 헤더가 생깁니다. 🎜

특정 탭 페이지에는 헤더가 필요하지 않거나 헤더를 맞춤설정해야 합니다

🎜헤더가 필요하지 않은 특정 탭 페이지만 있는 경우 어떻게 해야 하나요? 🎜 navigationOptions로 시작하세요. NavigationPptions 속성은 navigation 객체를 받아들이고 새 객체를 반환하는 함수일 수 있습니다. 🎜🎜navigation 객체에 대해서는 공식 문서를 참조하세요🎜🎜여기서는 객체의 state 속성을 ​​사용합니다. 🎜🎜이제 다음과 같은 탐색 구성이 있습니다. 🎜rrreee🎜위 코드는 phone 헤더가 사용자 정의된 3개의 탭이 포함된 하단 탐색을 만듭니다. 다음으로 해야 할 일은 appNavigator에서 TabNavigator의 navigation 속성을 ​​구성하고 다른 경로에 따라 다른 헤더를 사용하는 것입니다(즉, 홈페이지나 사용자 페이지에 있을 때 기본 헤더를 사용하세요. 전화 페이지에 있을 때 머리글을 제거하세요 🎜🎜왜 헤더를 제거해야 할까요?🎜🎜전화 페이지가 맞춤 설정되어 있으니까요. 헤더가 있으면 외부 TabNavigator의 헤더만 제거하면 됩니다. 그렇지 않으면 두 개의 헤더(TabNavigator 및 Phone2 헤더)가 appNavigator에서 구성될 수도 있습니다. <code>TabNavigator의 navigation 속성 (검증되지 않았으므로 직접 시도해 볼 수 있습니다.) 🎜rrreee🎜관련 권장 사항: 🎜🎜🎜React 이벤트 시스템 분석🎜 🎜🎜🎜🎜분석 React🎜🎜🎜에서 애니메이션이 적용되지 않는 이유

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