Question

当我在样式中使用绝对位置时，我在单击和焦点上遇到麻烦。单击和焦点仅在紫色位置（视图一）起作用，而在白色位置（视图二）不起作用。

对不起，我的英语不好。

我尝试使用zIndex失败；（

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <View style={styles.containerText}>
            <TextInput placeholder="Entre com alguma coisa :D" style={styles.textInput} />
          </View>
        </View>
        <View style={styles.body}>
          <Text>Container</Text>
          <TextInput placeholder="Entre com alguma coisa :D" />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },

  header: {
    height: 150,
    backgroundColor: '#537',
    alignItems: 'center'
  },

  body: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },

  containerText: {
    position: 'absolute',
    bottom: '-20%',
  },

  textInput: {
    borderWidth: 1
  }
});

Answer 1

替换样式并检查

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },

    header: {
        height: 150,
        backgroundColor: '#537',
        alignItems: 'center'
    },

    body: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },

    containerText: {
        position: 'absolute',
        top: 150 - 20 
    },

    textInput: {
        borderWidth: 1,
        backgroundColor: 'red',
        height: 40
    }
});

请以绝对位置样式帮助我

1 个答案: