Реальный корень фиксированного нижнего колонтитула

Я пытаюсь создать реактивное родное приложение, которое выглядит как существующее веб-приложение. У меня есть фиксированный нижний колонтитул внизу окна. У кого-нибудь есть идея, как это можно достичь, если реагировать на родной?

в существующем приложении просто:

.footer {
  position: fixed;
  bottom: 0;
}

Ответы

Ответ 1

В верхней части моей головы вы можете сделать это с помощью ScrollView. Ваш контейнер верхнего уровня может быть гибким контейнером, внутри которого есть ScrollView сверху, а нижний колонтитул внизу. Затем внутри ScrollView просто оставите приложение в обычном режиме.

Ответ 2

Вот реальный код на основе ответа Колина Рамсей:

<View style={{flex: 1}}>
  <ScrollView>main</ScrollView>
  <View><Text>footer</Text></View>
</View>

Ответ 3

Я использую фиксированные нижние колонтитулы для кнопок в своем приложении. Способ, которым я реализую фиксированный нижний колонтитул, выглядит так:

<View style={{flex: 1}}>
<View><Text>my text</Text></View>
<View style={{position: 'absolute', left: 0, right: 0, bottom: 0}}><Text>My fixed footer</Text></View>
</View>

И если нужно, чтобы нижний колонтитул поднимался вверх, когда появляется клавиатура, вы можете использовать:

const {  DeviceEventEmitter } = React

class MyClass {
  constructor() {
     this.state = {
       btnLocation: 0
     }
  }

  componentWillMount() {
     DeviceEventEmitter.addListener('keyboardWillShow', this.keyboardWillShow.bind(this))
     DeviceEventEmitter.addListener('keyboardWillHide', this.keyboardWillHide.bind(this))
  }

  keyboardWillShow(e) {
    this.setState({btnLocation: e.endCoordinates.height})
  }

  keyboardWillHide(e) {
    this.setState({btnLocation: 0})
  }
}

Затем используйте {bottom: this.state.btnLocation} в своем фиксированном нижнем классе. Надеюсь, это поможет!

Ответ 4

Сначала вы получаете размер, а затем манипулируете им с помощью гибкого стиля

var Dimensions = require('Dimensions')
var {width, height} = Dimensions.get('window')

В рендеринге

<View style={{flex: 1}}>
    <View style={{width: width, height: height - 200}}>main</View>
    <View style={{width: width, height: 200}}>footer</View>
</View>

Другой метод - использовать flex

<View style={{flex: 1}}>
    <View style={{flex: .8}}>main</View>
    <View style={{flex: .2}}>footer</View>
</View>

Ответ 5

@Alexander Спасибо за решение

Ниже приведен код, который вы ищете

import React, {PropTypes,} from 'react';
import {View, Text, StyleSheet,TouchableHighlight,ScrollView,Image, Component, AppRegistry} from "react-native";

class mainview extends React.Component {
 constructor(props) {
      super(props);

  }

  render() {
    return(
      <View style={styles.mainviewStyle}>
        <ContainerView/>
          <View style={styles.footer}>
          <TouchableHighlight style={styles.bottomButtons}>
              <Text style={styles.footerText}>A</Text>
          </TouchableHighlight>
          <TouchableHighlight style={styles.bottomButtons}>
              <Text style={styles.footerText}>B</Text>
          </TouchableHighlight>
          </View>
      </View>
    );
  }
}

class ContainerView extends React.Component {
constructor(props) {
      super(props);
}

render() {
    return(
      <ScrollView style = {styles.scrollViewStyle}>
          <View>
            <Text style={styles.textStyle}> Example for ScrollView and Fixed Footer</Text>
          </View>
      </ScrollView>
    );
  }
}

var styles = StyleSheet.create({
  mainviewStyle: {
  flex: 1,
  flexDirection: 'column',
},
footer: {
  position: 'absolute',
  flex:0.1,
  left: 0,
  right: 0,
  bottom: -10,
  backgroundColor:'green',
  flexDirection:'row',
  height:80,
  alignItems:'center',
},
bottomButtons: {
  alignItems:'center',
  justifyContent: 'center',
  flex:1,
},
footerText: {
  color:'white',
  fontWeight:'bold',
  alignItems:'center',
  fontSize:18,
},
textStyle: {
  alignSelf: 'center',
  color: 'orange'
},
scrollViewStyle: {
  borderWidth: 2,
  borderColor: 'blue'
}
});

AppRegistry.registerComponent('TRYAPP', () => mainview) //Entry Point    and Root Component of The App

Ниже приведен скриншот

Ответ 6

Вы также можете взглянуть на NativeBase (http://nativebase.io). Это библиотека компонентов для React Native, которые содержат некоторую красивую структуру макета (http://nativebase.io/docs/v2.0.0/components#anatomy), включая верхние и нижние колонтитулы.

Это немного похоже на Bootstrap для мобильных устройств.

Ответ 7

Простой материал здесь:

Если вам нужен ScrollView для этого подхода, вы можете пойти с приведенным ниже кодом, чтобы добиться чего-то вроде этого:

<View style={{flex: 1, backgroundColor:'grey'}}>
    <View style={{flex: 1, backgroundColor: 'red'}} />
    <View style={{height: 100, backgroundColor: 'green'}} />
</View>

Ответ 8

Ниже приведен код для установки нижнего колонтитула и элементов выше.

import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
export default class App extends Component {
    render() {
      return (
      <View style={styles.containerMain}>
        <ScrollView>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
          <Text> Main Content Here</Text>
        </ScrollView>
        <View style={styles.bottomView}>
          <Text style={styles.textStyle}>Bottom View</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  containerMain: {
    flex: 1,
    alignItems: 'center',
  },
  bottomView: {
    width: '100%',
    height: 50,
    backgroundColor: '#EE5407',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    bottom: 0,
  },
  textStyle: {
    color: '#fff',
    fontSize: 18,
  },
});

Ответ 9

То, как я это делал, состояло в том, чтобы иметь представление (позволяет называть его P) с помощью flex 1, а затем внутри этого представления есть еще 2 вида (C1 и C2) с flex 0.9 и 0.1 соответственно (вы можете изменить высоту гибкости на требуемые значения). Затем внутри C1 есть scrollview. Это отлично сработало для меня. Пример ниже.

<View style={{flex: 1}}>
    <View style={{flex: 0.9}}>
        <ScrollView>
            <Text style={{marginBottom: 500}}>scrollable section</Text>
        </ScrollView>
    </View>
    <View style={{flex: 0.1}}>
        <Text>fixed footer</Text>
    </View>
</View>

Ответ 10

Я нашел, что flex является самым простым решением.

<View style={{flex:1, 
    justifyContent: 'space-around', 
    alignItems: 'center',
    flexDirection: 'row',}}>

  <View style={{flex:8}}>
    //Main Activity
  </View>
  <View style={{flex:1}}>
    //Footer
  </View>

 </View>

Ответ 11

Можно было добиться чего-то подобного в реакции нативного с position: absolute

let footerStyle = {
  position: 'absolute',
  bottom: 0,
}

Однако есть кое-что, о чем нужно помнить.

absolute позиция элемента относительно ее родителя.
Вам может потребоваться установить ширину и высоту элемента вручную.
При изменении ориентации ширина и высота изменяются. Это должно управляться вручную

Практическое определение стиля будет выглядеть примерно так:

import { Dimensions } from 'react-native';

var screenWidth = Dimensions.get('window').width; //full screen width

let footerStyle = {
  position: 'absolute',
  bottom: 0,
  width: screenWidth,
  height: 60
}

Ответ 12

Лучший способ - использовать свойство justifyContent

<View style={{flexDirection:'column',justifyContent:'flex-end'}}>
     <View>
        <Text>fixed footer</Text>
    </View>
</View>

Если на экране есть несколько элементов вида, вы можете использовать

<View style={{flexDirection:'column',justifyContent:'space-between'}}>
     <View>
        <Text>view 1</Text>
    </View>
    <View>
        <Text>view 2</Text>
    </View>
    <View>
        <Text>fixed footer</Text>
    </View>
</View>

Ответ 13

Для Android проблемы с этим:

в app/src/AndroidManifest.xml измените окноSoftInputMode на следующее.

<activity
   android:windowSoftInputMode="stateAlwaysHidden|adjustPan">

У меня не было никаких проблем с этим в ios, используя response-native и keyboardAwareScroll. Я собирался реализовать тонну кода, чтобы понять это, пока кто-то не дал мне это решение. Работала отлично.

Ответ 14

Когда flex является положительным числом, это делает компонент гибким, и его размер будет пропорционален его значению flex. Таким образом, компонент с параметром flex, установленным на 2, займет в два раза больше места, чем компонент с параметром flex, установленным в 1.

   <View style={{flex: 1}>
            
     <ScrollView>
        //your scroll able content will be placed above your fixed footer content. 
        //when your content will grow bigger and bigger it will hide behind 
        //footer content. 
     </ScrollView>

     <View style={styles.footerContainer}>
        //your fixed footer content will sit fixed below your screen 
     </View>

</View>

Ответ 15

если вы просто используете реакцию native, так что вы можете использовать следующий код

<View style={{flex:1}}>

{/* Your Main Content*/}
<View style={{flex:3}}>

<ScrollView>
   {/* Your List View ,etc */}
</ScrollView>

</View>

{/* Your Footer */}
<View style={{flex:1}}>
   {/*Elements*/}
</View>


 </View>

Кроме того, вы можете использовать https://docs.nativebase.io/ в своем реагировании на собственный проект, а затем сделать что-то вроде следующего

<Container>

{/*Your Main Content*/}
<Content>

<ScrollView>
   {/* Your List View ,etc */}
</ScrollView>

</Content>

{/*Your Footer*/}
<Footer>
   {/*Elements*/}
</Footer>

</Container>

React_Native

NativeBase.io

Ответ 16

Установите android: windowSoftInputMode = "AdjustPan" в файле манифеста, и он будет работать так, как вы ожидаете.

Ответ 17

Я думаю, что лучше и проще было бы, как показано ниже, просто поместите остальную часть представления в контент, а нижний колонтитул - в отдельное представление.

'<Container>
   <Content>
     <View>
      Ur contents
    </View>
  </Content>
  <View>
  Footer
  </View>
</Container>'

или вы можете использовать нижний колонтитул из native-base

'<Container>
  <Content>
    <View>
Ur contents
    </View>
  </Content>
<Footer>
Footer
</Footer>
</Container>'

Ответ 18

Верхний и нижний колонтитулы являются функциями, работающими в этом коде. Пожалуйста, проверьте это.

введите описание ссылки здесь

Ответ 19

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;

тогда пишите эти стили

 position:'absolute',
        top:HEIGHT-80,
        left:0,
        right:0,

работал как шарм