反应原生固定页脚

By simon at 11 天前 • 0人收藏 • 8人看过

我尝试创建一个看起来像现有 web 应用的 react native app。 我在窗口底部有一个固定的页脚。 有人知道如何用原生反应实现这一点吗?

在现有的应用程序中,它很简单:

. 页脚{ position: fixed; bottom: 0; }
16 个回复 | 最后更新于 11 天前
11 天前   #1

在我的头顶你可以这样做与一个Scrollview. 您的顶级容器可以是一个 flex 容器,其中顶部有 ScrollView,底部有您的页脚。 然后在 ScrollView 中将应用程序的其余部分正常放置。

11 天前   #2

以下是基于 Colin Ramsay 回答的实际代码:

视图样式{ flex: 1} scrollview main / scrollview View View text footer / text / View / View
11 天前   #3

您首先获得 Dimension,然后通过 flex 样式操作它

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

在渲染中

查看样式{ flex: 1}}查看样式{ width: width,height: height-200}} main / View View style { width: width,height: 200}页脚 / View / View

另一种方法是使用 flex

视图样式{ flex: 1}}视图样式{ flex: . 8} main / View View style { flex: . 2}页脚 / View / View
11 天前   #4

我在我的应用程序中使用固定页脚作为按钮。 我实现固定页脚的方式是这样的:

查看样式{ flex: 1}}查看文本我的文本 / 文本 / 查看样式{ position:'absolute',left: 0,right: 0,bottom: 0}文本我的固定页脚 / 文本 / 查看 / 查看

例如,当键盘出现时,如果需要页脚向上移动,可以使用:

{{ DeviceEventEmitter } React class MyClass { constructor (){ this.state { btnLocation: 0} componentWillMount (){ DeviceEventEmitter.addlistener ('keyboardWillShow',this.keyboardWillShow.bind (this)) DeviceEventEmitter.addlistener ('keyboardWillHide',this.boardwell.bind (this)} keyboardshow (e){ btnLocation: thisstate (e){ coordinatlocation: height }}} hide (e){ tnlocation: 0}}}

然后在固定页脚类中使用{ bottom: this.state.btnLocation }。 我希望这能有所帮助!

11 天前   #5

@ 亚历山大谢谢你的解决方案

下面的代码正是你想要的

从'React'导入 React,{ PropTypes,} ; 从'React'导入{ View,Text,StyleSheet,TouchableHighlight,ScrollView,Image,Component,AppRegistry } ; 类 mainview 扩展 React。 组件{ constructor (props){ super (props) ; } render (){ return (View style { styles.mainviewStyle } ContainerView / View style { styles.footer } TouchableHighlight style { styles.buttons } Text } Text style { styles.footerText } a / Text / touchabletouchablehighlight style { styles.buttons } Text } Text } b / Text / TouchableHighlight / View; }}}} class React View extends。 句子太长,请短一点

下面是截图

11 天前   #6

您可能还想看看 NativeBase (Http://nativebase.io). 这是 React Native 的组件库,包括一些不错的布局结构(Http://nativebase.io/docs/v2.0.0/components#anatomy) ,包括页眉和页脚。

这有点像 Mobile 的 Bootstrap。

11 天前   #7

我这样做的方法是使用 flex 1创建一个视图(让我们称之为 p) ,然后在该视图内部有另外两个视图(C1和 C2) ,分别使用 flex 0.9和0.1(您可以将 flex heights 更改为所需的值)。 然后,在 c 1内部有一个滚动视图。 这对我来说非常有效。 下面的例子。

视图样式{ flex: 1}视图样式{ flex: 0.9} scrollview Text style { marginBottom: 500}}} scrollable section / Text / scrollview / View style { flex: 0.1} Text fixed footer / Text / View / View
11 天前   #8

最好的方法是使用 justifyContent 属性

查看样式{ flexDirection:'column',justifyContent:'flex-end'}}}查看文本固定页脚 / 文本 / 视图 / 视图

如果屏幕上有多个视图元素,那么可以使用

视图样式{ flexDirection:'column',justifyContent:'space-between'}}视图文本视图1 / 文本 / 视图文本视图2 / 文本 / 视图视图文本视图页脚 / 文本 / 视图 / 视图 / 视图 / 视图
11 天前   #9

我发现使用 flex 是最简单的解决方案。

视图样式{ flex: 1,justifyContent:'space-around',alignItems:'center',flexDirection:'row',}}}视图样式{ flex: 8} / Main Activity / View style { flex: 1} / Footer / View / View / View
11 天前   #10

这里有些简单的东西:

如果你不需要 ScrollView,你可以使用下面的代码来实现:

1,backgroundColor:'grey'} View style { flex: 1,backgroundColor:'red'} / View style { height: 100,backgroundColor:'green'} / View
11 天前   #11

人们可以通过与原生语言进行反应来达到类似的效果位置: 绝对

让 footerStyle { position:'absolute',bottom: 0

不过有几件事要记住。

  1. 绝对的定位元素相对于其父元素的位置。
  2. 您可能必须手动设置元素的宽度和高度。
  3. 宽度和高度会随着方向的改变而改变。 这必须手动管理

一个实用的风格定义应该是这样的:

从'react-native'导入{ Dimensions } ; var screenWidth dimension. get ('window')。 让 footerStyle { position:'absolute',bottom: 0,width: screenWidth,height: 60}
11 天前   #12

对于安卓系统的问题:

在 app / src / androidmanifest.xml 中将 windowSoftInputMode 更改为以下内容。

活动 android: windowSoftInputMode"stateAlwaysHidden | 调整 / pan"

我在 ios 中使用 react-native 和 keyboardAwareScroll 时完全没有遇到任何问题。 我正准备实现大量的代码来解决这个问题,直到有人给了我这个解决方案。 非常完美。

11 天前   #13

如果你只使用 react native,那么你可以使用以下代码

视图样式{ flex: 1}{ / * Your Main Content * / }视图样式{ flex: 3} scrollview { / * Your List View,etc * / } / scrollview / View { / * Your Footer * / }视图样式{ flex: 1}{ / * Elements * / } / View / View / View

还有,你可以用Https://docs.nativebase.io/ 在你的 react native 项目,然后做一些像下面这样的事情

容器{ / * Your Main Content * / } Content scrollview { / * Your List View,etc * / } / scrollview / Content { / * Your Footer * / } Footer { / * Elements * / } / Footer / container

本地化反应

Nativebase.io

11 天前   #14

当弯曲是一个正数时,它使零件变得灵活,并且它的尺寸与它的弯曲值成正比。 因此,flex 设置为2的组件占用的空间是 flex 设置为1的组件的两倍。

视图样式{ flex: 1} scrollview / / / 可滚动的内容将放置在固定页脚内容之上。 / / 当你的内容变得越来越大的时候,它会隐藏在 / / footer 内容的后面。 / scrollview 视图样式{ styles.footerContainer } / / / 你的固定页脚内容将固定在屏幕 / View / View 下面
11 天前   #15

在你的清单文件中设置 android: windowSoftInputMode"调整盘",它将如你所期望的那样工作。

11 天前   #16

我认为最好和简单的一个是如下,只是把你的视图休息在一个内容和页脚在一个单独的视图。

"容器内容查看您的内容 / 查看 / 内容查看页脚 / 查看 / 容器"

或者你可以使用本地基础的页脚

"容器内容查看您的内容 / 查看 / 内容页脚 / 页脚 / 页脚 / 容器"

登录后方可回帖

Loading...