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

Question

我想像这样在 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>
        );
      }
   }

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

如何修改我的代码？

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