可触摸的反应本机

时间:2020-08-11 00:35:48

标签: react-native touchableopacity

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

http://yourdomain.com/css/site.css

1 个答案:

答案 0 :(得分:0)

您的意思是SignIn和SignUp按钮之间的空格吗?您可以使用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',   }, });

enter image description here