如何在反应原生中将按钮放在右侧和左侧

Question

如何在我的应用右侧添加五个按钮？我在左边放了五个按钮，我还需要在右边放五个，但我不知道怎么做。

https://snack.expo.io/@therealsneh/vacation-spot-real码点心。

图片：

Picture of the app.

Answer 1

这是你想要达到的目标吗？

我添加了一个包含所有 TouchableOpacities 的视图容器，然后将其更改为 flexDirection 行以水平渲染，如果不够合适也将它们包装到下一行

这是代码，你也可以在这个snack expo试试

import React from 'react';
import {
  View,
  Button,
  Text,
  ScrollView,
  TouchableOpacity,
  StyleSheet,
  Image,
} from 'react-native';
import { List } from 'react-native-paper';
import SlidingUpPanel from 'rn-sliding-up-panel';

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Welcome to VacationSpot!</Text>

        <View
          style = {{
            flexDirection: 'row',
            flexWrap: 'wrap',
            justifyContent: 'space-between',
            marginHorizontal: 20
          }}
        >
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonLeft}>Alberta: </Text>
            <Image
              style={styles.imgButtonleft}
              source={{
                uri:
                  'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Flag_of_Alberta.svg/1200px-Flag_of_Alberta.svg.png',
              }}
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonLeft}>British Columbia: </Text>
            <Image
              style={styles.imgButtonleft}
              source={{
                uri:
                  'https://cdn.britannica.com/77/6877-004-26251B48/Flag-British-Columbia.jpg',
              }}
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonLeft}>Manitoba: </Text>
            <Image
              style={styles.imgButtonleft}
              source={{
                uri:
                  'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Flag_of_Manitoba.svg/255px-Flag_of_Manitoba.svg.png',
              }}
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonLeft}>New Brunswick: </Text>
            <Image
              style={styles.imgButtonleft}
              source={{
                uri:
                  'https://shop.chandlersales.com/images/products/Flag_Imporium/a/nb_a.jpg',
              }}
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonLeft}>Nfld: </Text>
            <Image
              style={styles.imgButtonleft}
              source={{
                uri:
                  'https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Flag_of_Newfoundland_and_Labrador.svg/255px-Flag_of_Newfoundland_and_Labrador.svg.png',
              }}
            />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this._panel.show()} style = {{ alignItems: 'center' }}>
            <Text style={styles.textOverImgButtonRight}>Nove Scotia: </Text>
            <Image
              style={styles.imgButton}
              source={{
                uri:
                  'https://cdn.britannica.com/05/3105-004-7D8B6ACF/Flag-of-Nova-Scotia.jpg',
              }}
            />
          </TouchableOpacity>
        </View>
        <SlidingUpPanel ref={(c) => (this._panel = c)}>
          <View style={styles.container}>
            <Text style={styles.paragraph}>Slide down to go back</Text>
          </View>
        </SlidingUpPanel>
      </View>
    );
  }
}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e9eeef',
    borderRadius: 30,
    height: 100,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 100,
  },
  title: {
    fontSize: 35,
    fontWeight: 'bold',
    marginTop: 70,
    marginBottom: 70,
    textAlign: 'center',
    fontFamily: '-apple-system, BlinkMacSystemFont',
  },
  imgButtonleft: {
    width: 120,
    height: 53,
    marginTop: 20,
    borderRadius: 10,
  },
  imgButton: {
    width: 120,
    height: 53,
    marginTop: 20,
    borderRadius: 10,
  },
  textOverImgButtonLeft: {
    fontWeight: 'bold',
    fontSize: 15,
    marginTop: 10,
  },
  textOverImgButtonRight: {
    fontWeight: 'bold',
    fontSize: 15,
    marginTop: 10,
  },
});

// Code to create a button that will take you to main screen

// <TouchableOpacity
//   onPress={() => this._panel.hide()}></TouchableOpacity>

//onPress={() => this._panel.show()}

Answer 2

您应该将以下规则应用于包含按钮的父块：

.container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}