React Native - “绝对”位置在 Android 中不起作用

Question

不知何故，

position: 'absolute'

在Android中不起作用。它适用于 iOS，但在 Android 中无法渲染。有谁知道如何在 Android 设备上设置位置：“绝对”？

Button: {
  position: "absolute",
  right: 0,
  top: 0,
  borderRadius: 4,
  borderWidth: 2,
  width: 100,
  height: 40,
  borderColor: 'red',
  backgroundColor: "rgb(72, 120, 166)",
}

Answer 1

将按钮包装在视图内适用于 Android 和 iOS：

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonView}>
        <Button style={styles.button} title={"Click"}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  buttonView: {
    position: "absolute",
    right: 0,
    top: 0
  },
  button:{
    borderRadius: 4,
    borderWidth: 2,
    width: 100,
    height: 40,
    borderColor: 'red',
    backgroundColor: "rgb(72, 120, 166)",
  }
});

Answer 2

如果你的屏幕上有textinput，你应该检查windowsoftinputmode AndroidManifest.xml。如果是 adjustResize，你应该通过 adjustPan

来改变它

你的：

android:windowSoftInputMode="adjustResize"

应该是：

android:windowSoftInputMode="adjustPan"

Answer 3

此代码在 Android 上运行良好（不确定 IOS）

 <View style={styles.containerView}>
      {/* SearchBar */}
        <Animated.View style={{
          transform: [{ translateY: translateSearchContainer }], 
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          backgroundColor: COLORS.sans,
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          height: 60,
          elevation: 4,
          zIndex: 100,
        }}>
        <AvoidKeyboard>
          <TextInput
            ref={textInputRef}
            placeholder="Paket Hidroponik Pemula"
            clearButtonMode="always"
            value={word}
            onChangeText={(value) => setWord(value)}
            style={styles.input}
            onFocus={() => onTextInputFocus()}
            onBlur={() => onTextInputBlur()}
            clearTextOnFocus
          />
        </AvoidKeyboard>
        <IconButton icon="bell-outline" color={COLORS.white} onPress={() => onPressBell()} />
      </Animated.View>
</View>

这是我的风格

containerView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  }
  input: {
    // flex: 1,
    height: 40,
    width: 270,
    backgroundColor: '#e4e6eb',
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 30,
    // fontSize: 15
  },

Answer 4

我也有同样的问题。我注意到，如果添加边框，问题就得到解决。所以我通过添加这个来解决它：

    position: absolute;
    right: 0;
    top: 0;
    ${Platform.OS === 'android' &&
    css`
        border: 1px solid transparent;
        margin: -1px;
    `}

Answer 5

尝试添加

"100%"

。

如果您想将其置于底部居中，请添加

bottom:"100%"

if top then

top:"100%"

这与数字 0 完全相同，这应该适用于所有平台。

Answer 6

我在 Android 上开发 React 应用程序时遇到了同样的问题，在我的场景中，在 Android 中，如果在 Touchableopacity 上使用绝对位置不起作用，那么我尝试以下对我有用的代码，希望它对您有帮助:)

        <View style={tw`z-50 flex`}>
        <TouchableOpacity style={tw`absolute top-10 left-8`}>
             <Icon name="bars" type="font-awesome" color="black" size={25} />
        </TouchableOpacity>
        </View>