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

Question

我想像这样反复生成一个按钮：

听到我的代码：

    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>
        );
      }
   }

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

如何修改我的代码？

Answer 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