React Native固定フッター

128

既存のWebアプリのように見えるネイティブアプリを作成しようとしています。ウィンドウの下部に固定フッターがあります。誰もがこれをreact nativeでどのように達成できるか考えていますか？

既存のアプリでは簡単です：

.footer {
  position: fixed;
  bottom: 0;
}
react-native 
— 4ega
ソース

回答:

166

私の頭の上では、ScrollViewでこれを行うことができます。トップレベルのコンテナーはフレックスコンテナーで、内部には上部にScrollView、下部にフッターがあります。次に、ScrollView内に、アプリの残りの部分を通常どおり配置します。

— コリン・ラムゼイ
ソース
うまく機能する=）thx、heightフッタービューに追加されたばかりで、4秒と6秒で見栄えがよい
— 4ega
1
これは機能します。しかし、その理由は理解できませんでした。なぜこれが機能するのですか？
— Aditi 2019年
171

これは、ColinのRamsayの回答に基づく実際のコードです。

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>
— アレクサンドル・ザイツェフ
ソース
1
はい、試してみましたが、フレックスなしでは機能しませんでした：Dもう一度試していただきありがとうございます:)そして、入力をクリックした場合は、onContentSizeChangeの使用について言及したいと思います。だから私はこのようにスクロールビューを上にスクロールしました：onContentSizeChange = {（width、height）=> this.refs.scrollView.scrollTo（{y：this.state.onInputSelectScrollViewPaddingSize}）}
— Ernestyno
1
動作しません。なぜそれがどのようなケースでも機能するかわかりません
— Paulo Roberto Rosa
63

アプリのボタンに固定フッターを使用しています。固定フッターを実装する方法は次のとおりです。

<View style={{flex: 1}}>
<View><Text>my text</Text></View>
<View style={{position: 'absolute', left: 0, right: 0, bottom: 0}}><Text>My fixed footer</Text></View>
</View>

たとえば、キーボードが表示されたときにフッターを上に移動する必要がある場合は、次のように使用できます。

const {  DeviceEventEmitter } = React

class MyClass {
  constructor() {
     this.state = {
       btnLocation: 0
     }
  }

  componentWillMount() {
     DeviceEventEmitter.addListener('keyboardWillShow', this.keyboardWillShow.bind(this))
     DeviceEventEmitter.addListener('keyboardWillHide', this.keyboardWillHide.bind(this))
  }

  keyboardWillShow(e) {
    this.setState({btnLocation: e.endCoordinates.height})
  }

  keyboardWillHide(e) {
    this.setState({btnLocation: 0})
  }
}

次に、固定フッタークラスで{bottom：this.state.btnLocation}を使用します。これが役に立てば幸いです！

— ダービード707
ソース
2
キーボードリスナーで「this.setState（...）」を実行しようとすると、「undefinedはオブジェクトではありません（ "DeviceEventEmitter.addListener"を評価しています）」ですか？
— John Sardinha
@JohnSardinha import { Keyboard} from 'react-native'; Keyboard.addListener('keyboardWillShow', this.showHandler)代わりに試してください。
— maxhungry 2017年
23

最初に寸法を取得してから、フレックススタイルで操作します

var Dimensions = require('Dimensions')
var {width, height} = Dimensions.get('window')

レンダリング中

<View style={{flex: 1}}>
    <View style={{width: width, height: height - 200}}>main</View>
    <View style={{width: width, height: 200}}>footer</View>
</View>

他の方法はフレックスを使用することです

<View style={{flex: 1}}>
    <View style={{flex: .8}}>main</View>
    <View style={{flex: .2}}>footer</View>
</View>
— シャルル
ソース
17

@Alexander解決策をありがとう

以下はまさにあなたが探しているもののコードです

import React, {PropTypes,} from 'react';
import {View, Text, StyleSheet,TouchableHighlight,ScrollView,Image, Component, AppRegistry} from "react-native";

class mainview extends React.Component {
 constructor(props) {
      super(props);

  }

  render() {
    return(
      <View style={styles.mainviewStyle}>
        <ContainerView/>
          <View style={styles.footer}>
          <TouchableHighlight style={styles.bottomButtons}>
              <Text style={styles.footerText}>A</Text>
          </TouchableHighlight>
          <TouchableHighlight style={styles.bottomButtons}>
              <Text style={styles.footerText}>B</Text>
          </TouchableHighlight>
          </View>
      </View>
    );
  }
}

class ContainerView extends React.Component {
constructor(props) {
      super(props);
}

render() {
    return(
      <ScrollView style = {styles.scrollViewStyle}>
          <View>
            <Text style={styles.textStyle}> Example for ScrollView and Fixed Footer</Text>
          </View>
      </ScrollView>
    );
  }
}

var styles = StyleSheet.create({
  mainviewStyle: {
  flex: 1,
  flexDirection: 'column',
},
footer: {
  position: 'absolute',
  flex:0.1,
  left: 0,
  right: 0,
  bottom: -10,
  backgroundColor:'green',
  flexDirection:'row',
  height:80,
  alignItems:'center',
},
bottomButtons: {
  alignItems:'center',
  justifyContent: 'center',
  flex:1,
},
footerText: {
  color:'white',
  fontWeight:'bold',
  alignItems:'center',
  fontSize:18,
},
textStyle: {
  alignSelf: 'center',
  color: 'orange'
},
scrollViewStyle: {
  borderWidth: 2,
  borderColor: 'blue'
}
});

AppRegistry.registerComponent('TRYAPP', () => mainview) //Entry Point    and Root Component of The App

以下はスクリーンショットです

固定フッター付きのScrollView

— アショクR
ソース
良い例:)
— joey
7

ここに簡単なもの：

このアプローチにScrollViewが必要ない場合は、以下のコードを使用して、次のようなものを実現できます。

このようなもの

<View style={{flex: 1, backgroundColor:'grey'}}>
    <View style={{flex: 1, backgroundColor: 'red'}} />
    <View style={{height: 100, backgroundColor: 'green'}} />
</View>
— チェラーグヴェルマ
ソース
7

以下は、上記のフッターと要素を設定するコードです。

import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
export default class App extends Component {
    render() {
      return (
      <View style={styles.containerMain}>
        <ScrollView>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
        </ScrollView>
        <View style={styles.bottomView}>
          <Text style={styles.textStyle}>Bottom View</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  containerMain: {
    flex: 1,
    alignItems: 'center',
  },
  bottomView: {
    width: '100%',
    height: 50,
    backgroundColor: '#EE5407',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    bottom: 0,
  },
  textStyle: {
    color: '#fff',
    fontSize: 18,
  },
});
— シュルティガルグ
ソース
6

私がこれを行った方法は、フレックス1のビュー（Pと呼ぶことにします）を持ち、そのビューの内部には、それぞれフレックス0.9と0.1の2つのビュー（C1とC2）があります（フレックスの高さを必要な値に変更できます）。 。次に、C1内にスクロールビューがあります。これは私にとっては完璧に機能しました。以下の例。

<View style={{flex: 1}}>
    <View style={{flex: 0.9}}>
        <ScrollView>
            <Text style={{marginBottom: 500}}>scrollable section</Text>
        </ScrollView>
    </View>
    <View style={{flex: 0.1}}>
        <Text>fixed footer</Text>
    </View>
</View>
— ラジェシュ
ソース
これに加えて、値0の左、右、下のスタイルが機能するように指定する必要があります。
— IVI、2017
5

とネイティブに反応して同様のことを達成することができます position: absolute

let footerStyle = {
  position: 'absolute',
  bottom: 0,
}

ただし、覚えておくべきことがいくつかあります。

  1. absolute 親に対して要素を相対的に配置します。
  2. 要素の幅と高さを手動で設定する必要がある場合があります。
  3. 方向が変わると、幅と高さが変わります。これは手動で管理する必要があります

実用的なスタイル定義は次のようになります。

import { Dimensions } from 'react-native';

var screenWidth = Dimensions.get('window').width; //full screen width

let footerStyle = {
  position: 'absolute',
  bottom: 0,
  width: screenWidth,
  height: 60
}
— アカシュ・クリアン・ホセ
ソース
5

flexを使用するのが最も簡単なソリューションであることがわかりました。

<View style={{flex:1, 
    justifyContent: 'space-around', 
    alignItems: 'center',
    flexDirection: 'row',}}>

  <View style={{flex:8}}>
    //Main Activity
  </View>
  <View style={{flex:1}}>
    //Footer
  </View>

 </View>
— 最初に
ソース
4

flexが正の数の場合、コンポーネントは柔軟になり、フレックス値に比例してサイズが調整されます。したがって、フレックスが2に設定されたコンポーネントは、フレックスが1に設定されたコンポーネントの2倍のスペースを取ります。

   <View style={{flex: 1}>
            
     <ScrollView>
        //your scroll able content will be placed above your fixed footer content. 
        //when your content will grow bigger and bigger it will hide behind 
        //footer content. 
     </ScrollView>

     <View style={styles.footerContainer}>
        //your fixed footer content will sit fixed below your screen 
     </View>

</View>
スニペットを展開

— Iambinodstha
ソース
1
回答に説明を追加することを検討してください。
— HMD
3

最良の方法は、justifyContentプロパティを使用することです

<View style={{flexDirection:'column',justifyContent:'flex-end'}}>
     <View>
        <Text>fixed footer</Text>
    </View>
</View>

画面に複数のビュー要素がある場合は、使用できます 

<View style={{flexDirection:'column',justifyContent:'space-between'}}>
     <View>
        <Text>view 1</Text>
    </View>
    <View>
        <Text>view 2</Text>
    </View>
    <View>
        <Text>fixed footer</Text>
    </View>
</View>
— マンゾー・サマド
ソース
3 
import {Dimensions} from 'react-native'

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;

次に、このスタイルを書きます

 position: 'absolute',
 top: HEIGHT-80,
 left: 0,
 right: 0,

魅力のように働いた

— ジョセフ・オウィゴ
ソース
2

これに関するAndroidの問題の場合：

app / src / AndroidManifest.xmlでwindowSoftInputModeを次のように変更します。 

<activity
   android:windowSoftInputMode="stateAlwaysHidden|adjustPan">

私はiOSでreact-nativeとkeyboardAwareScrollを使用してこれで全く問題がありませんでした。誰かが私にこの解決策を与えるまで、私はこれを理解するために大量のコードを実装しようとしていました。完璧に働きました。

— リサフェイクック
ソース
2

次のコードを使用できるように、react nativeを使用する場合

<View style={{flex:1}}>

{/* Your Main Content*/}
<View style={{flex:3}}>

<ScrollView>
   {/* Your List View ,etc */}
</ScrollView>

</View>

{/* Your Footer */}
<View style={{flex:1}}>
   {/*Elements*/}
</View>


 </View>

また、reactネイティブプロジェクトでhttps://docs.nativebase.io/を使用して、次のようなことを行うことができます

<Container>

{/*Your Main Content*/}
<Content>

<ScrollView>
   {/* Your List View ,etc */}
</ScrollView>

</Content>

{/*Your Footer*/}
<Footer>
   {/*Elements*/}
</Footer>

</Container>

リアクトネイティブ

NativeBase.io

— ab_did96
ソース
1

私は最良で簡単なものは以下のようになると思います、コンテンツの残りのビューと別のビューのフッターを配置するだけです。

`<Container>
   <Content>
     <View>
      Ur contents
    </View>
  </Content>
  <View>
  Footer
  </View>
</Container>`

またはuはネイティブベースのフッターを使用できます

`<Container>
  <Content>
    <View>
Ur contents
    </View>
  </Content>
<Footer>
Footer
</Footer>
</Container>`
— アイシュワリヤー・シェティ
ソース
1

提案1

=>固定フッター付きのボディ

<View style={{ flex: 1, backgroundColor: 'gray' }}>

        <View style={{ flex: 9, backgroundColor: 'gray',alignItems: 'center', justifyContent: 'center',  }}>
          <Text style={{color:'white'}}>...Header or Body</Text>
        </View>


        <View style={{ flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center', }}>
          <Text>...Footer</Text>
        </View>

</View>

デモ画像

編集2

=>ボディとタブ付きの固定フッター

<View style={{ flex: 1, backgroundColor: 'gray' }}>

        <View style={{ flex: 9, backgroundColor: 'gray', alignItems: 'center', justifyContent: 'center', }}>
          <Text style={{ color: 'white' }}>...Header or Body</Text>
        </View>


        <View style={{ flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center', }}>
          <View style={{ flex: 1, flexDirection: 'row' }}>
            <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}>
              <View>
                <Text>
                  ...Home
              </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}>
              <View>
                <Text>
                  ...Settings
              </Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
</View>

ここに画像の説明を入力してください

ノート

import {TouchableOpacity} in 'react-native'

メリット

このシンプルなフッターを反応下部のナビゲーションなしで使用できます

— DevAelius
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.