如何使用 flex 按下按钮？

Question

我在使用带有 flexbox 的 react-native 时遇到了一些问题， 所以我想使用 flex-end 将按钮向下，但我不能，所以如果有人可以帮助我，我将不胜感激。

    <View style={style.conatainer}>
              <Text style={style.text}> Welcome </Text>
                <View style={style.bottom}>
                  <Button 
                    icon="camera" 
                    mode="contained" 
                    onPress={() => console.log('Pressed')}>
                    Get started
                  </Button>
                </View>      


          </View>

    const style=StyleSheet.create({
  conatainer:{
    flex:1,
    alignItems:'center',
    justifyContent:'center',

  },

  text:{
    fontSize:38,
    fontWeight:'200',
    backgroundColor:'#000',
    color:'#fff',
    display:'flex',
    justifyContent:'center',


  },

  bottom: {
    display:'flex',
    flexDirection:'column',
    justifyContent:'flex-end',
    height:'50%',
    backgroundColor:'#BDBDBD'

  },
  button:{
    display:'flex',
    justifyContent:'center',
    height:'100%'
  }
})

我全神贯注，了解更多细节或类似的东西。

Answer 1

按钮不会向下，因为它受到父视图中设置的中心值container 的影响。删除父视图的居中设置。

从container 中删除justifyContent。并从bottom 中删除flexDirection

 import * as React from 'react';
import { Text, View, StyleSheet,Button,TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  render() {
    return (
    <View style={style.conatainer}>
              <Text style={style.text}> Welcome </Text>
                  <TouchableOpacity 
                    style={style.bottom}
                    icon="camera" 
                    mode="contained" 
                    onPress={() => console.log('Pressed')} >
                    <Text>Get started </Text>
                    </TouchableOpacity> 
          </View>
    );
  }
}

    const style=StyleSheet.create({
  conatainer:{
    flex:1,
    alignItems:'center',
    justifyContent:'center'
  },

  text:{
    fontSize:38,
    fontWeight:'200',
    backgroundColor:'#000',
    color:'#fff',
    display:'flex', 
  },

  bottom: {
    flex:1,
    justifyContent:'flex-end',
    backgroundColor:'#BDBDBD'

  },
});

Answer 2

我建议你为文本创建另一个容器

export default class App extends React.Component {
  render() {
    return (
      <View style={style.conatainer}>
        <View style={style.textContainer}>
          <Text style={style.text}>"Welcome"</Text>
        </View>
        <View style={style.bottom}>
          <Button
            icon="camera"
            style={style.button}
            onPress={() => console.log("Pressed")}
            title="Get started">
          </Button>
        </View>
      </View>
    );
  }
}

const style = StyleSheet.create({
  conatainer: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center"
  },
  textContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
    fontSize: 38,
    fontWeight: "200",
    backgroundColor: "#000",
    color: "#fff",
    justifyContent: "center",
    alignItems: "center"
  },
  bottom: {
    backgroundColor: "#BDBDBD",
    justifyContent: 'flex-end'
  },
  button: {
    height: 50
  }
});

Answer 3

您需要将align-self 设置为“flex-end”，属性设置为<button>，检查this 小提琴。

另外，在css-tricks查看这个很棒的 flex 参考指南

小提琴的要点：

.component {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
  background-color: #666;
}

.text {
  flex: 0 1;
  background-color: #000;
  color: #fff;
}

.bottom {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: green;
}

.bottom button {
  flex: 0 1;
  align-self: flex-end;
}

Answer 4

我为您准备了一个演示，我按照洪的回答中所说的做了。它在沙盒中工作，所以在您的应用程序的另一个地方可能会有另一个问题。

我从conatainer 中删除了justifyContent，从bottom 中删除了flexDirection。

你可能会感兴趣的一件事是 flexbox 是 React Native 中的默认（也是唯一）显示选项。因此，您不必将任何元素告诉display: flex，因为它已经在发生了。

工作演示链接is here

所以如果有任何其他问题，请告诉我，我会改进我的答案。