当 React Native 中的布局为“justifyContent：'space-between”'时，如何向上移动一些视图

Question

我有一个 react native 应用程序，我正在使用 flexDirection: 'row', justifyContent: 'space-between'。但是，我想根据我的 justifyContent 将我的两个观点从它的位置上移，这样看起来会更好，但我没有找到任何关于如何做到这一点的资源。有人可以帮我吗？谢谢！

import React from 'react';
import { StyleSheet, Text, View, Image, Dimensions, Button } from 'react-native';

const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.height*.4);
const imageWidth = dimensions.width;

//var SwitchVar = 5;

export default function App() {

  let [SwitchVar, setSwitchVar]  =  React.useState(1);

const SwitchVariables = {
  Pictures: {
    UICPicture: require('./images/UIC.jpg'),
    EDTPicture: require('./images/EDT.jpg'),
    TennisPicture: require('./images/Tennis.jpg'),
    FunPicture: require('./images/Fun.jpg'),
    ThanksPicture: require('./images/Thanks.jpg')
  },
  Paragraphs: {
    UICParagraph: `Matt has a degree in Computer Hardware Engineering from The University of Illinois at Chicago.  He took classes such as Physics, VLSI Design and Microchip Manufacturing.  He was also a member of Engineering Design Team, where he competed in various robotics competitions and learned about topics ranging from embedded engineering to neural networks.`,
    EDTParagraph: `While at The University of Illinois at Chicago, Matt was a member of Engineering Design Team.  He worked mainly on the Intelligent Ground Vehicle Competition (IGVC), where he helped with embedded design.  He also designed PCBs for the team, and gained exposure to Tensorflow.  The team placed third in Design.`,
    TennisParagraph: 'Matt Was a highly successful tennis player in high school, having defeated top ten opponents in the country, winning a national doubles tournament, and defeating eventual Junior French Open Champion Bjorn Fratangelo.',
    FunParagraph: 'In his free time, Matt enjoys playing guitar, reading books, watching movies, and developing software.',
    ThanksParagraph:  'Thanks for reading!!'
  }

};

  var PicSwitchVar;
  var ParSwitchVar;

  switch(SwitchVar) {
    case(1):
     PicSwitchVar = SwitchVariables.Pictures.UICPicture;
     ParSwitchVar = SwitchVariables.Paragraphs.UICParagraph;
     break;
    case(2):
    PicSwitchVar = SwitchVariables.Pictures.EDTPicture;
    ParSwitchVar = SwitchVariables.Paragraphs.EDTParagraph;
    break;
    case(3):
    PicSwitchVar = SwitchVariables.Pictures.TennisPicture;
    ParSwitchVar = SwitchVariables.Paragraphs.TennisParagraph;
    break;
    case(4):
    PicSwitchVar = SwitchVariables.Pictures.FunPicture;
    ParSwitchVar = SwitchVariables.Paragraphs.FunParagraph;
    break;
    case(5):
    PicSwitchVar = SwitchVariables.Pictures.ThanksPicture;
    ParSwitchVar = SwitchVariables.Paragraphs.ThanksParagraph;
    break;

  }

  function IncreaseTracker() {
    console.log("In Function");
    if(SwitchVar == '5'){
      console.log("In If");
      setSwitchVar(SwitchVar = 1);;
    } else {
      console.log("In Else");
      setSwitchVar(++SwitchVar);
      console.log(SwitchVar);

    }
  }

  function DecreaseTracker() {
    console.log("In Function");
    if(SwitchVar == '1'){
      console.log("In If");
      setSwitchVar(SwitchVar = 5);;
    } else {
      console.log("In Else");
      setSwitchVar(--SwitchVar);
      console.log(SwitchVar);

    }
  }

  return (
    <View style={styles.container}>
      <Image
      style ={{
        height: imageHeight,
        width: imageWidth,
      }}
      source = {PicSwitchVar} />
      <View> //I would like this shifted up
      <Text>
      {ParSwitchVar}
      </Text>
      </View>

//I would also like the below view shifted up
      <View style = {{
        flexDirection: 'row',
        justifyContent: 'space-between'
      }}>
        <Button
        title="Prev"
        onPress={() => DecreaseTracker()}  />
        <Button
        title="Next"
        onPress={() => IncreaseTracker()}  />
      </View>
    </View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'space-between'
  },
});

Answer 1

我发现你必须设置“底部”道具。