React Native - 在我的可触摸对象之上的文本

大佬教程收集整理的这篇文章主要介绍了React Native - 在我的可触摸对象之上的文本，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React Native - 在我的可触摸对象之上的文本？

尝试制作我的第一个应用程序并学习一些有关编码和反应以及原生反应的知识。我开始制作这个 mtg life counter 并遇到一个问题，即可触摸项位于某些文本下方，因此无法按下。有没有简单的方法可以解决这个问题？

我希望数字的上半部分也注册 + 为生命，下半部分为 - 生命。它目前在移动设备上可以使用，但可触摸部分太小。

import { Statusbar } from 'expo-status-bar';
import React,{ useState } from 'react';
import { StyleSheet,Text,VIEw,Dimensions,touchableWithoutFeedBACk } from 'react-native';

const windowHeight = Dimensions.get('window').height;
var opponentcolor = 'green'
var playercolor = 'red'

export default function App() {

  const [playerlife,setplayerlife] = useState(20);
  const [opponentlife,setopponentlife] = useState(20);

  return (
    <VIEw style={styles.container}>
      <VIEw style={styles.rivi}>
      <touchableWithoutFeedBACk onPress ={() => setplayerlife(playerlife - 1)}>
        <VIEw style={styles.sideContainerOpponent}>
          <Text>Mana -</Text>
        </VIEw>
        </touchableWithoutFeedBACk>
        <touchableWithoutFeedBACk onPress ={() => setopponentlife(opponentlife - 1)}>
          <VIEw style={styles.mIDContainerOpponent}>
            <Text>Vihu -</Text>
          </VIEw>
        </touchableWithoutFeedBACk>
        <VIEw style={styles.sideContainerOpponent}>
          <Text>Tyhjä</Text>
        </VIEw>
      </VIEw>
      <VIEw style={styles.rivi}>
        <VIEw style={styles.sideContainerOpponent}>
          <Text>Mana +</Text>
        </VIEw>
        <touchableWithoutFeedBACk onPress ={() => setopponentlife(opponentlife + 1)}>
          <VIEw style={styles.mIDContainerOpponent}>
            <Text>Vihu +</Text>
          </VIEw>
        </touchableWithoutFeedBACk>
        <VIEw style={styles.sideContainerOpponent}>
          <Text>Tyhjä</Text>
        </VIEw>
      </VIEw>

      <VIEw style={styles.rivi}>
        <VIEw style={styles.sideContainerPlayer}>
          <Text>Tyhjä</Text>
        </VIEw>
        <touchableWithoutFeedBACk onPress ={() => setplayerlife(playerlife + 1)}>
          <VIEw style={styles.mIDContainerPlayer}>
            {/* <Text>life +</Text> */}
          </VIEw>
        </touchableWithoutFeedBACk>
        <VIEw style={styles.sideContainerPlayer}>
          <Text>Mana +</Text>
        </VIEw>
      </VIEw>
      <VIEw style={styles.rivi}>
        <VIEw style={styles.sideContainerPlayer}>
          <Text>Tyhjä </Text>
        </VIEw>
        <touchableWithoutFeedBACk onPress ={() => setplayerlife(playerlife - 1)}>
          <VIEw style={styles.mIDContainerPlayer}>
            <Text>life -</Text>
          </VIEw>
        </touchableWithoutFeedBACk>
        <VIEw style={styles.sideContainerPlayer}>
          <Text>Mana -</Text>
        </VIEw>
      </VIEw>

      <VIEw style={styles.pelaaja1}>
        <Text style={styles.lifeCounterPlayer}>
        {playerlifE}
      </Text>
      </VIEw>
      <VIEw style={styles.pelaaja2}>
        <VIEw>
          <Text style={styles.lifeCounterOpponent}>
          {opponentlifE}
      </Text>
        </VIEw>
      </VIEw>
    </VIEw >


  );
}

const styles = StyleSheet.create({
  rivi: {
    flex: 1,flexDirection: 'row',alignSelf: 'stretch',alignContent: 'stretch',},container: {
    flex: 1,BACkgroundcolor: 'white',alignItems: 'center',justifyContent: 'center',sIDeContainerOpponent: {
    flex: 1,BACkgroundcolor: opponentcolor,mIDContainerOpponent: {
    flex: 3,sIDeContainerPlayer: {
    flex: 1,BACkgroundcolor: playercolor,mIDContainerPlayer: {
    flex: 3,pelaaja1: {
    position: 'absolute',top: windowHeight / 2,left: 0,right: 0,bottom: 0,alignItems: 'center'
  },pelaaja2: {
    position: 'absolute',top: 0,bottom: windowHeight / 2,lifeCounterPlayer: {
    FontSize: windowHeight / 4,lifeCounterOpponent: {
    FontSize: windowHeight / 4,transform: [{ rotate: '180deg' }]
  },});

解决方法

@H_316_7@midContainerOpponent: {
    flex: 3,alignSelf: 'stretch',alignItems: 'center',justifyContent: 'center',zIndex: 100
    
  }

<Pressable onPress ={() => setplayerLife(playerLife - 1)} style={{flex: 1,alignItems: 'center'}}>
  <View style={styles.sideContainerOpponent}>
   <Text>Mana -</Text>
  </View>
</Pressable>

大佬总结

以上是大佬教程为你收集整理的React Native - 在我的可触摸对象之上的文本全部内容，希望文章能够帮你解决React Native - 在我的可触摸对象之上的文本所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。