web-dev-qa-db-ja.com

反応ネイティブルーターフラックスをスタイルする方法？

私の学習プロジェクトでは、react-native-router-flux 4.0.0-beta.17を使用しています。ヘッダーをカスタマイズする必要があります。たとえば、背景色、タイトルの配置などです。それについての適切なドキュメントが見つかりませんでした。それらの1つは次のようなものでした

 <Router sceneStyle={{backgroundColor: '#81b71a'}}>
     <Scene key="root">
        <Scene key='login' component={LoginForm} title='Please Login :)' />
     </Scene>
 </Router>

しかし、それは何もしません。

良いドキュメントについてのリファレンスと、可能であれば、ルータのスタイルを設定する方法についての情報を教えてください。包括的なドキュメントはどこにありますか？

react-nativereact-native-router-flux
7
farmcommand2

sceneStyleプロパティは、画面のコンテンツ部分（ヘッダーの下）であるすべてのRNRFシーン/画面のスタイル設定に使用されます。すべてのRNRFシーンヘッダーにカスタムスタイルを指定する場合は、RNRFルーターコンポーネントでnavigationBarStyleプロパティを使用する必要があります。

<Router navigationBarStyle={{ backgroundColor: '#81b71a' }}>
  <Scene key="root">
    <Scene key='login' component={LoginForm} title='Please Login :)' />
  </Scene>
</Router>

以下は、私が使用する場合のスナップショットの例の1つです。

enter image description here

参照： https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md

16
wlisrausr

hideNavBar={true}を使用してデフォルトのヘッダーを非表示にし、独自のヘッダーコンポーネントを使用して完全にカスタマイズ可能なヘッダーを作成できます。このようにして、UIコンポーネントパッケージのヘッダーコンポーネントを native-base のように使用できます。

6
Vahid Boreiri

たぶんこれに従うことができます reference 、ヘッダーの背景色を変更したい場合はnavigationBarStyleを使用できますsceneStylelike this：

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle} sceneStyle={styles.routerScene}>
  <Schema .../>
  <Route .../>
</Router>

const styles = StyleSheet.create({
  navBar: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red', // changing navbar color
  },
  navTitle: {
    color: 'white', // changing navbar title color
  },
  routerScene: {
    paddingTop: Navigator.NavigationBar.Styles.General.NavBarHeight, // some navbar padding to avoid content overlap
  },
})

この参考資料がお役に立てば幸いです。

4
Syauqi Rahmat Sugara

ヘッダーバーのテキストスタイルを変更する簡単な方法：react-native-router-flux

<Scene key="myJobs"
  title={'My Listings'}
  iconName="myJobs"
  hideNavBar={false}
  component={MyJobs}
  titleStyle={{
    color: '#ffffff',
    fontSize: 22,
    fontFamily: FontFamilyBold,
    fontWeight: '700',
    justifyContent: 'center',
    marginLeft: 30,
  }}
/>
0
ANKIT-DETROJA

routerのsceneStyleプロップは、すべてのシーンに適用されるスタイルで、完全にオプションです。

<Router sceneStyle={{ backgroundColor: '#81b71a' }}>
  <Stack key="root">
    <Scene key='sample page' component={Sample} title='Sample Page'/>
  </Stack>
</Router>

これにより、次のような結果が得られます。

enter image description here

@wlisrausrによって前述したように、RouterでnavigationBarStyleプロップを使用できます。

<Router navigationBarStyle={{ backgroundColor: '#81b71a' }}>
      <Stack key="root">
        <Scene key='sample page' component={Sample} title='Sample Page'/>
      </Stack>
    </Router>

結果が得られます：

navigationBarStyle

0
Darpan Rangari