5
votes

Je veux 2 boutons côte à côte dans React native

Je suis nouveau pour réagir natif et j'essaie de réaliser 2 boutons côte à côte Je l'ai essayé et je n'ai pas pu y parvenir car j'ai déjà inséré 2 boutons il apparaît l'un sous l'autre

Voici mon code:

      <View style={styles.buttonStyle}>
        <Button
         title={"Pause"}
         style={styles.buttonStyle}
         onPress={() => {
           this.setState({ paused: true });
         }}
          color="#841584"
        />
        </View>
         <View style={styles.buttonStyle}>
          <Button
             title={"Play"}
            onPress={() => {
            this.setState({ paused: false });
         }}
         color="green"
       />
      </View>
     </View>
     );
    }
   }
  const styles = StyleSheet.create({
     backgroundVideo: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
   right: 0
  },
 buttonStyle: {
    marginHorizontal: 20,
    marginTop: 5
  }
 });
 export default VideoPlayer;

react-native button

0 commentaires

3 Réponses :

2
votes

Vous avez juste besoin de flexDirection: 'row' . Veuillez vous référer ci-dessous modifier

<View style={styles.buttonStyleContainer}>
            <Button
             title={"Pause"}
             style={styles.buttonStyle}
             onPress={() => {
               this.setState({ paused: true });
             }}
              color="#841584"
            />
              <Button
                 title={"Play"}
                onPress={() => {
                this.setState({ paused: false });
             }}
             color="green"
           />

         </View>
         );
        }
       }
      const styles = StyleSheet.create({
         backgroundVideo: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
       right: 0
      },

    buttonStyleContainer: {
       flex: 1,
       flexDirection: 'row',
       marginHorizontal: 20,
        marginTop: 5,
      }
     });
     export default VideoPlayer;

1 commentaires

Je voulais 2 boutons côte à côte mais ici je ne trouve qu'un seul bouton

6
votes

La propriété qui définit la direction du rendu est appelée flexDirection, elle peut être définie sur colonne (par défaut, rendre les éléments verticalement) ou sur ligne (rendre les éléments horizontalement).

Donc, pour obtenir l'effet souhaité, vous devez ajouter la propriété de style flexDirection: "ligne" vers la vue contenant les boutons. Votre code ressemblerait à quelque chose comme:

<View style={{ flexDirection:"row" }}>
    <View style={styles.buttonStyle}>
        <Button>Button 1</Button>
    </View>
    <View style={styles.buttonStyle}>
        <Button>Button 2</Button>
    </View>
</View>

2 commentaires

Comment puis-je les faire apparaître sur 2 côtés différents?

Je ne suis pas sûr de ce que vous entendez par 2 côtés différents, mais vous pouvez utiliser les propriétés de style justifyContent et alignItems pour indiquer au div où positionner ses enfants.

0
votes

Essayez-le

<View style={{ flexDirection: "row" }}>
    <View style={styles.buttonStyle}>
        <Button title={"Button 11"}/>
        <Button title={"Button 12"}/>
    </View>
    <View style={styles.buttonStyle}>
        <Button title={"Button 21"}/>
        <Button title={"Button 22"}/>
    </View>
</View>

0 commentaires