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;
3 Réponses :
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;
Je voulais 2 boutons côte à côte mais ici je ne trouve qu'un seul bouton
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>
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.
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>