无法在 TouchableOpacity 中收听 onpress答案

【问题标题】：Not able to listen onpress in TouchableOpacity无法在 TouchableOpacity 中收听 onpress
【发布时间】：2018-11-25 23:12:27
【问题描述】：

我无法在我的组件中收听 TouchableOpacity 和 TextInput 的 onPress。我第一次使用position:'absolute' 可以吗？
给予TouchableOpacity

import React from 'react'
import {View,Text,ImageBackground,TouchableOpacity } from 'react-native'
import {widthPercentageToDP} from 'react-native-responsive-screen'

import Styles from './styles/styles.js'
import SignUP from './signUp.js'
import LoginForm from './loginForm.js'

class Home extends React.Component{


render(){
    return(
        <View style={Styles.container}>
        <ImageBackground
            style={Styles.backImage}
          resizeMode="stretch"
            source={require('./../asstes/loginSignup.png')}
        >
            <View style={Styles.buttonBox}>
                <View style={Styles.buttons}>
                    <TouchableOpacity onPress={()=>console.log('log')} style={Styles.login}>
                        <Text style={[Styles.log,Styles.selected]}>Login</Text>
                    </TouchableOpacity >
                    <TouchableOpacity  onPress={()=>console.log('sign')} style={Styles.signUp}>
                        <Text style={[Styles.log,Styles.notSelected]}>Sign up</Text>
                    </TouchableOpacity >
                </View>
            </View>
                    <SignUP />
        </ImageBackground>
        </View>
    )
}

}

export default Home

和 styles.js

import {StyleSheet} from 'react-native'
import {widthPercentageToDP,heightPercentageToDP} from 'react-native-responsive-screen'


const styles =StyleSheet.create({
    container:{
        flex:1,
        width:widthPercentageToDP('80%'),
        height:heightPercentageToDP('50%'),
        marginLeft:widthPercentageToDP('10%'),
        marginRight:widthPercentageToDP('10%'),
        paddingLeft:widthPercentageToDP('10%'),
        paddingRight:widthPercentageToDP('10%'),
        alignItems:'center',            
    },backImage:{
        alignSelf:'center',
        backgroundColor:'#fff',
        width:widthPercentageToDP('100%'),
        height:heightPercentageToDP('45.5%'),
    },
    buttons:{
        width:widthPercentageToDP('100%'),
        backgroundColor:'#fff',
        flexDirection:'row'
    },
    buttonBox:{
        backgroundColor:'#fff',
    },login:{
        position:'absolute',
        top:heightPercentageToDP('40%'),
        left:0,
        height:40,
        justifyContent:'center',
        width:widthPercentageToDP('50%'),
    },signUp:{
        position:'absolute',
        left:widthPercentageToDP('50%'),
        top:heightPercentageToDP('40%'),
        color:'#000',                                       
        justifyContent:'center',
        width:widthPercentageToDP('50%'),           
    },log:{
        fontSize:26,
        textAlign:'center',
    },buttons:{
        flexDirection:'column'
    },selected:{
        color:'#39937F',
        borderBottomWidth:4,
        paddingBottom:15,
        borderColor:'#39937F'
    },notSelected:{
        color:'#AEEDDF',
    },form:{
        position:'absolute',
        top:heightPercentageToDP('50%'),
        width:widthPercentageToDP('100%'),
        height:heightPercentageToDP('40%'),
        left:0
    },input:{
        fontSize:24,
        margin:10,
        height:40,
        flex:1,
        backgroundColor: '#ededed',
        width:widthPercentageToDP('80%')
    }
})

export default styles

有什么问题可以帮忙吗？

【问题讨论】：

标签： react-native

【解决方案1】：

您的TouchableOpacity 完美运行。您只是看不到按钮，因为它们的 position: absolute。他们离开了屏幕。如果您希望它们位于中心并且彼此相邻（只需更改 flex-direction 没关系），请关注此小吃的 code。它只是使用弹性盒，更多关于它们here

为简单起见，我删除了所有样式，您可以自己添加。

import React from 'react'
import {View,Text,ImageBackground,TouchableOpacity, StyleSheet } from 'react-native'
import {widthPercentageToDP, heightPercentageToDP} from 'react-native-responsive-screen'


class App extends React.Component{


render(){
    return(
        <View style={styles.container}>
                <View style={styles.buttons}>
                    <TouchableOpacity onPress={()=>console.log('log')} style={styles.login}>
                        <Text style={[styles.log,styles.selected]}>Login</Text>
                    </TouchableOpacity >
                    <TouchableOpacity  onPress={()=>console.log('sign')} style={styles.signUp}>
                        <Text style={[styles.log,styles.notSelected]}>Sign up</Text>
                    </TouchableOpacity >
            </View>
        </View>
    )
}
}

export default App



const styles =StyleSheet.create({
    container:{
        flex:1,
    },
    buttons: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center'
    }
})

【讨论】：

你的回答帮助了我。非常感谢。