web-dev-qa-db-ja.com

反応ネイティブのための「固定ヘッダー」または「スティッキーヘッダー」はありますか？

ネイティブで反応するための固定された透過的なトップタイトルバー（ヘッダーと呼ばれていると思いますか？）を使用する方法はありますか？

ステータスバーのように、常に表示されます。しかし、それは最上部にある必要があります（反応ナビゲーションの「ヘッダー」の前であっても）

私の計画は、そこにグローバル検索入力を配置して、アプリのどこでも検索できるようにすることでした（現在表示されている画面の影響を受けないコンテンツを検索します。純粋なグローバル検索は常に利用可能です。）

これを行う方法はありますか？私は現在、エキスポと反応ナビゲーションを使用しています。

---編集

意味を示すワイヤーフレームのスクリーンショットを追加します。表示している画面に関係なく、検索バーが一番上にあることに気づくでしょう。グローバル検索バーです。

-編集

はっきり言っておく必要があると思います。 ReactNavigationでこれを実行しようとしています。 「createAppContainer」、または「createDrawerNavigator」のような任意の作成ナビゲーター関数で遊んで、ナビゲート可能な画面で固定ヘッダーを配置する方法を理解する必要があると思います。

Example Navigation with Searchbar

javascriptreact-nativereact-navigationexpo
3
Andre Song

私は自分の道を見つけました。 =）

したがって、鍵はカスタムナビゲーターを導入することでした。

カスタムナビゲーターは既存のタブナビゲーターを拡張できます。レンダーパーツは、ほぼすべての目的に加えて、タブナビゲーターが持つ通常のビューを返すことができます。

私のアプリにはDrawerとTab Navigatorがあります。したがって、私の場合、ドロワーナビゲーターには多数のルートがあり、ルートの1つは、TabNavigatorを拡張するカスタムナビゲーターです。

これが私のコードです：

const MyTab = createBottomTabNavigator({
  FirstTabStack,
  SecondTabStack,
  ThirdTabStack,
  FourthTabStack,
});

class CustomNavigator extends React.Component {
  static router = MyTab.router;
  render() {
    const { navigation } = this.props;

    return (
      {/* This SafeAreaView is from ReactNavigation. 
          forceInset-bottom-never is needed because  the 
          TabNavigator is already Safe-area-ing the bottom. 
          You don't want to do it again.*/}
      <SafeAreaView style={{ flex: 1 }} forceInset={{ bottom: 'never' }}>
        {/* SearchHeader is zIndex: 1(or elevation: 1) for the absolute 
            positioned stuff that appears and cover the 
            screen after focusing on Input. */}
        <SearchHeader/>
        <MyTab navigation={navigation} />
      </SafeAreaView>
    );
  }
}


export default createDrawerNavigator({
  CustomNavigator,
  SettingsScreen,
  LegalScreen,
  FeedbackScreen,
  VersionScreen,
}, {
  drawerType: 'slide',
  drawerWidth: 260,
});

PS。 TabNavigatorがレンダリングされる場所をカバーする絶対位置指定ビューをオーバーレイする場合は、iOSの場合はzIndexを、Androidの場合はelevationを使用してください。私の場合、SearchHeaderコンポーネントには次のものがあります。

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        zIndex: 1,
      },
      Android: {
        elevation: 1
      },
    }),
  },
  {...}
})
0
Andre Song

反応ネイティブのコンポーネント FlastList には、ヘッダーをレンダリングするためのプロパティListHeaderComponentと、ヘッダーを貼り付けるための別のプロパティstickyHeaderIndicesがあります。これはまさにあなたが必要とするものです。

ListHeaderComponentでは、検索フィールドをレンダリングし、stickyHeaderIndices={[0]}を使用して検索ヘッダーをスティッキーヘッダーとして設定します。

<FlatList
    data={ this.state.data }
    renderItem={({item}) =>  this.renderItem(item)}
    ListHeaderComponent={this.renderHeader}
    stickyHeaderIndices={[0]}
/>

動作している 例 を確認してください。

3
Hristo Eftimov

position: 'absolute'スタイル属性（およびセットminHeight-検索バーの高さ）を使用してコンポーネントを作成する必要があります。次に、これをルートレベルのコンポーネントにインポートし、ヘッダー/検索バーに設定したminHeightと等しいmarginTop: ...スタイル属性をアプリコンテンツの残りの部分（ページコンテナー）に配置できます。

これにより、ヘッダーがすべてのページに表示され、アプリのコンテンツの残りがヘッダーの後ろに表示されなくなります。

あなたはこれの基本的な例を見つけることができます ここ

0
Jono