react-native - React Native 中的 Touchables

Question

我正在尝试在包裹在视图中的两个可触摸组件中间添加一些空间我该怎么做，我将包含我的样式表

  return (
        <>enter code here
          <View style={styles.container}>
            <View style={styles.scrollContainer}>
              <ScrollView
                horizontal
                pagingEnabled
                showsHorizontalScrollIndicator={false}
              >
                {images.map((image) => (
                  <Image key={image} style={styles.image} source={image} />
                ))}
              </ScrollView>
            </View>
            <View style={styles.btn}>
              `enter code here`<LinearGradient
            colors={["#0A5640", "#0A5640"]}
            style={{ alignItems: "center", borderRadius: 10 }}
          >
            <TouchableOpacity onPress={() => navigation.navigate("SignIn")}>
              <Text style={styles.btnAuth}>Sign In</Text>
            </TouchableOpacity>
          </LinearGradient>
          <LinearGradient
            colors={["#FFC72A", "#FFC72A"]}
            style={{ alignItems: "center", borderRadius: 10 }}
          >
            <TouchableOpacity
              onPress={() => navigation.navigate("CreateAccount")}
            >
              <Text style={styles.btnAuth}>Sign Up</Text>
            </TouchableOpacity>
          </LinearGradient>
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#0A5640",
  },
  scrollContainer: {
    height: "100%",
  },
  image: {
    width,
    height: "100%",
  },
  btnAuth: {
    fontSize: 18,
    fontWeight: "bold",
    paddingHorizontal: 60,
    paddingVertical: 10,
    color: "#fff",
    marginLeft: 10,
  },
  btn: {
    color: "#fff",
    marginTop: 70,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around",
    alignContent: "space-between",
    zIndex: 200,
    paddingRight: 10,
    paddingLeft: 10,
    bottom: 3,
    position: "absolute",
  },
});

标签： react-nativetouchableopacity

Answer 1

您是指登录和注册按钮之间的空格吗？您可以使用 flex 或 width 来定义 touchableOpacity 宽度。这是您试图实现的目标吗？

import * as React from 'react';
import {Text,View,StyleSheet,TouchableOpacity,}from 'react-native';

    export default function App() {   return (
        <View style={styles.container}>
          <View style={styles.btn}>
              <TouchableOpacity style={styles.btnAuth}>
                <Text style={{color:'#000', fontSize:18}}>Sign In</Text>
              </TouchableOpacity>
            
              <TouchableOpacity style={styles.btnAuth}>
                <Text style={{color:'#000', fontSize:18}}>Sign Up</Text>
              </TouchableOpacity>
          </View>
        </View>   ); }
    
    const styles = StyleSheet.create({   container: { backgroundColor: '#0A5640', flex:1 },   btnAuth: {
        padding: 20,
        width : '45%',
        alignItems:'center',
        backgroundColor:'yellow'   },   btn: {
        color: '#fff',
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        bottom: 3,
        position: 'absolute',   }, });