web-dev-qa-db-ja.com

反応ネイティブのフレックスを使用してアイテムを下に貼り付けます

これがレイアウトだとします：

<View style={styles.container}>
    <View style={styles.titleWrapper}>
        ...
        ...
    </View>
    <View style={styles.inputWrapper}>
        ...
        ...
    </View>

    <View style={styles.footer}>
        <TouchableOpacity>
            <View style={styles.nextBtn}>
                <Text style={styles.nextBtnText}>Next</Text>
            </View>
        </TouchableOpacity>
    </View>
</View>

画面の下部に配置するフッターのスタイルでビューを作成したい。フッターにalignSelfプロパティを指定しようとしましたが、下部に配置する代わりに、画面の右側に配置します。フッターアイテムを最後まで貼り付けるにはどうすればよいですか？ありがとうございました。

csscss3react-nativeflexboxreact-native-flexbox
42
Karl

React Nativeでは、flexDirectionのデフォルト値はcolumnです（CSSとは異なり、rowです）。

したがって、flexDirection: 'column'では、横軸は水平で、alignSelfは左右に機能します。

フッターを下に固定するには、justifyContent: 'space-between'をコンテナに適用します

25
Michael_B

次のアプローチを使用します。

<View style={styles.container}>

    <View style={styles.contentContainer}> {/* <- Add this */}

        <View style={styles.titleWrapper}>
            ...
        </View>
        <View style={styles.inputWrapper}>
            ...
        </View>

    </View>

    <View style={styles.footer}>
        ...
    </View>
</View>

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    titleWrapper: {

    },
    inputWrapper: {

    },
    contentContainer: {
        flex: 1 // pushes the footer to the end of the screen
    },
    footer: {
        height: 100
    }
});

これにより、titleWrapperとinputWrapperのスタイルをアプリのレイアウトを壊さずに更新でき、コンポーネント自体の再利用が簡単になります:)

42
David

絶対位置は、次のようにフッターを修正する別の方法です。

footer: {
    position: 'absolute',
    height: 40,
    left: 0, 
    top: WINDOW_HEIGHT - 40, 
    width: WINDOW_WIDTH,
 }
9
CoderLim

これを行うには、スタイルシート要素position： 'absolute'を使用できます。

/*This is an Example to Align a View at the Bottom of Screen in React Native */
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default class App extends Component {
  render() {
    return (
      <View style={styles.containerMain}>
        <Text> Main Content Here</Text>
        <View style={styles.bottomView}>
          <Text style={styles.textStyle}>Bottom View</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  containerMain: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  bottomView: {
    width: '100%',
    height: 50,
    backgroundColor: '#EE5407',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute', //Here is the trick
    bottom: 0, //Here is the trick
  },
  textStyle: {
    color: '#fff',
    fontSize: 18,
  },
});

enter image description here

5
snehal agrawal

スクロールビューに他のコンテンツを埋め込む

<View style={styles.container}>

  <ScrollView> {/* <- Add this */}
        <View style={styles.titleWrapper}>
            ...
        </View>
        <View style={styles.inputWrapper}>
            ...
        </View>
    </ScrollView>

    <View style={styles.footer}>
        ...
    </View>
</View>
2
NSYuJian

反応ネイティブでは、position: 'absolute', bottom: 0,のようないくつかのプロパティがあり、それらをボタンビューに指定します。

0
ravi