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
  },

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

3 个答案: