Question

我无法在我的组件中收听关于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

有什么问题可以帮助您吗？

Answer 1

您的TouchableOpacity运作完美。您只是因为按钮position: absolute而看不到按钮。他们离开了屏幕。如果您希望它们位于中间并彼此相邻（没关系，只需更改flex-direction），请遵循此小吃的code。它只使用flexbox，更多有关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'
    }
})

无法在TouchableOpacity中听新闻

1 个答案: