react-native position 元件在底部

Question

I am trying to move a react native component called "forum" to the bottom of the screen, I tried position: fixed, bottom:0 but it didn't work I also tried 'flex-end' and still didn't work any idea what's wrong?

here is the expo code:

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;

I am not allowed to share images but click the link to see enter image description here

Answer 1

The valid position option in react native is relative or absolute . The default value is relative .

If you want scroll content and fix position of Forum in your screen, you have to separate your view hierarchy like the following and use absolute position.

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

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