ボタンは、彼の文章は、私は、一般的には、モバイルアプリの開発ネイティブを反応させるのに新たなんだと私はそれの内部テキストとボタンと私のAppのヘッダーを作成しようとしている

Question

を切り捨てています。ここで

は私のコードです：

import React from 'react'; 
    import { StyleSheet, Text, View, Button } from 'react-native'; 

    export default class App extends React.Component { 

     _leaveSheet() { 

     } 

     render() { 
     return (
      <View style={styles.container}> 
      <View style={styles.header}> 
       <Text allowFontScaling={false} style={styles.titleText}>YATHZEE</Text> 
       <Button style={styles.leaveButton} title="Quitter" onPress={this._leaveSheet}/> 
      </View> 
      <View style={styles.body}></View> 
      </View> 
     ); 
     } 
    } 

    const styles = StyleSheet.create({ 
     container: { 
     flex: 1, 
     flexDirection: 'column' 
     }, 
     header: { 
     flex: 1, 
     backgroundColor: '#BDBDBD', 
     flexDirection: 'row', 
     alignItems: 'center', 
     justifyContent: 'space-between' 
     }, 
     body: { 
     flex: 10, 
     backgroundColor: 'white' 
     }, 
     titleText: { 
     // fontSize: 30, 
     fontWeight: 'bold', 
     backgroundColor: 'yellow', 
     // alignSelf: 'center', 
     flex: 1 
     }, 
     leaveButton: { 
     // alignSelf: 'center', 
     // width: '100' 
     flex: 2 
     } 
    }); 

だから私は行にflexDirectionと私のヘッダーを入れて、私は私のビュー内の私のテキストとフレックスと私のボタンの要素を追加しました：1とフレックス：2ので、私は期待していましたこの結果：

Expected result

しかし、代わりに私はこれを持っています。ボタン内のテキストが切り捨てられ、私のボタンは、彼が取るべきスペースを取りません。

Rendering on the mobile App (OP3 phone)

私はalignSelfプロパティと幅と遊ぶことを試みたが、何も動作していないようにみえます。

facebookのボタンexemples私はボタンがボタンの幅を定義することができますが、私はそれを動作させる方法がわかりません。

Answer 1

Buttonを屈曲させた範囲内で折り返さなければなりません。Viewそれのフル 幅が親コンテナだ消費とreact-native material designから

<View style={styles.leaveButton}> 
    <Button title="Quitter" onPress={this._leaveSheet} /> 
</View> 

、

ボタンコンポーネントは、触れることができるボタンをレンダリングします。