Question

我有一个React本机应用程序，我正在使用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

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

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

1 个答案: