佈局從上海華盈的底部按鈕反應母語

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