在 react-native 中从 superview 的底部布局一个按钮

【问题标题】：Layout a button from superview's bottom in react-native在 react-native 中从 superview 的底部布局一个按钮
【发布时间】：2016-05-22 04:42:28
【问题描述】：

我想像这样在 react native 中渲染一个按钮：

听到是我的代码：

    class Test extends Component {
      render() {
        return (
          <View>
            <TouchableHighlight style={{marginBottom:20,height:40,backgroundColor:'blue',justifyContent:'center'}}>
            <Text style={{alignSelf:'center',color:'white'}}>Login</Text>
            </TouchableHighlight>          
          </View>
        );
      }
   }

但是上面提到的渲染结果是：

如何修改我的代码？

【问题讨论】：

标签： javascript ios reactjs react-native

【解决方案1】：

在这种情况下使用position: 'absolute'，例如：

loginButton: {
   position:'absolute',
   bottom: 0,
   height:40,
   backgroundColor:'blue',
   justifyContent:'center',
   width: width
 }

渲染应该是：

render() {
   return (
      <View style={styles.loginButton}>
         <TouchableHighlight>
            <Text style={styles.loginButtonText}>Login</Text>
         </TouchableHighlight>          
      </View>
   );
}

这是完整的工作代码：https://rnplay.org/apps/6qMTdA

【讨论】：