react-native position 元件在底部

Question

我正在嘗試將名為“論壇”的反應原生組件移動到屏幕底部，我嘗試了 position: fixed, bottom:0 但它不起作用我也嘗試了 'flex-end' 但仍然沒有任何工作想法有什么問題？

這是 expo 代碼：

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { DrawerNavigator } from 'react-navigation';


class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate('DrawerOpen')}>
          <Text>Open Drawer</Text>
        </TouchableOpacity>
        <Text style={{ fontWeight: 'bold', marginTop: 20 }}>Home</Text>
      </View>
    );
  }
}

class Enquiry extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate('DrawerOpen')}>
          <Text>Open Drawer</Text>
        </TouchableOpacity>
        <Text style={{ fontWeight: 'bold', marginTop: 20 }}>Enquiry</Text>
      </View>
    );
  }
}
class Batches extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate('DrawerOpen')}>
          <Text>Open Drawer</Text>
        </TouchableOpacity>
        <Text style={{ fontWeight: 'bold', marginTop: 20 }}>Batches</Text>
      </View>
    );
  }
}
class Forum extends React.Component {
  render() {
    return (
      <View style={{ flex:1,justifyContent:'center',alignItems: 'center',position:'absolute',bottom:0}}>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate('DrawerOpen')}>
          <Text>Open Drawer</Text>
        </TouchableOpacity>
        <Text style={{ fontWeight: 'bold',marginBottom:36}}>Forum</Text>
      </View>
    );
  }
}

const MyDrawerNavigator = new DrawerNavigator(
  {
    Home: HomeScreen,
    
    Batches:Batches,
  Enquiry:Enquiry,
Forum:Forum,
  },
  {
    drawerBackgroundColor: 'rgba(255,255,255,.9)',
    contentOptions: {
      activeTintColor: '#fff',
      activeBackgroundColor: '#6b52ae',
    },
  }
);

export default MyDrawerNavigator;

我不允許分享圖片，但點擊鏈接查看在此處輸入圖片描述

Answer 1

react native 中的有效position選項是relative或absolute 。 默認值為relative 。

如果要滾動內容並在屏幕上修復Forum的 position，則必須像以下那樣分離視圖層次結構並使用absolute position。

<View>
  <ScrollView>
   ...anything content
  </ScrollView>
  
  <Forum style={{position:'absolute', bottom: 0}}/>
</View>

<...>
  <MyDrawerNavigator .../>
  <Forum style={{position:'absolute', bottom: 0}} .../>
<.../>