React-nativeで同じサイズのコンポーネントとスペースを共有する方法

Question

私は最近JavascriptとReact-nativeを使用して、現在の会社で使用できるかどうかをテストしていますが、

Javascriptを少し習得するための、ほとんど役に立たない機能のテストアプリケーションを作成しています.JSをネイティブのAndroidモジュールとリンクさせる方法もありますが、今はインターフェースがついていません。私はRelativeLayout（今ではConstraintLayout）とインターフェイスを作っていました。そのため、私はこのHTMLのようなCSS（ちょっと心配しないで、正直言ってわかりません）に少し不満を抱いています。

このUIが指定されています。 。 。

。 。 。私は実際にそれらのボタンが画面上のすべての空白を共有し、同じheigthを持っていることを望んでいますが、私は自分の画面サイズと解像度で各携帯電話は、コンポーネントのサイズを処理します。

そして、こことそこの周りserching、私はおそらくAndroidのLinearLayoutweigthのように動作しますflexというプロパティを発見したが、私はいずれかのボタンの上にそれを使用する場合、彼らはちょうど消える：

だから、どのように私はこれを解決すべきでしょうか？ここで

が使用されている「HTML」とスタイルです：

render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.containerText}> 
      <ScrollView 
      style={styles.scrollTextStyle} 
      contentContainerStyle={{ flexGrow: 1 }} 
      > 
      <Text style={styles.textStyle}>{this.state.textField}</Text> 
      </ScrollView> 

      <TextInput 
      multiline={true} 
      style={styles.inputStyle} 
      onChangeText={inputField => 
       this.setState({ 
       inputField 
       })} 
      value={this.state.inputField} 
      /> 

     </View> 
     <View style={styles.containerButton}> 
      <Button 
      style={[styles.buttons, styles.firstButton]} 
      onPress={() => this.pressedButton(1)} 
      > 
      Copy input to text 
      </Button> 

      <Button 
      style={[styles.buttons, styles.secondButton]} 
      onPress={() => this.pressedButton(2)} 
      > 
      Android/iOS Toast 
      </Button> 

      <Button 
      style={[styles.buttons, styles.thirdButton]} 
      onPress={() => this.pressedButton(3)} 
      > 
      Android module (Method) 
      </Button> 

      <Button 
      style={[styles.buttons, styles.fourthButton]} 
      onPress={() => this.pressedButton(4)} 
      > 
      Android module (AsyncTask) 
      </Button> 

     </View> 
     </View> 
    ); 
} 

const styles = StyleSheet.create({ 
    //Root View 
    container: { 
    flex: 1, 
    flexDirection: "column", 
    backgroundColor: "#F5FCFF" 
    }, 
    //Texts View 
    containerText: { 
    flex: 2, 
    justifyContent: "center", 
    backgroundColor: "#EFEFFF" 
    }, 
    //Buttons View 
    containerButton: { 
    flex: 4, 
    flexDirection: "column", 
    backgroundColor: "#FFFFFF", 
    justifyContent: "space-between" 
    }, 
    //Components on first View 
    scrollTextStyle: { 
    borderWidth: 1, 
    marginTop: 10, 
    marginBottom: 5, 
    marginHorizontal: 10, 
    flex: 1 
    }, 
    textStyle: { 
    backgroundColor: "#CEF", 
    textAlign: "center", 
    textAlignVertical: "center", 
    flex: 1 
    }, 
    inputStyle: { 
    borderWidth: 1, 
    marginTop: 5, 
    marginBottom: 10, 
    marginHorizontal: 10, 
    backgroundColor: "#CEF", 
    textAlign: "center", 
    textAlignVertical: "center", 
    flex: 1 
    }, 
    //Components on second view 
    //Common style for all buttons and a different one for each 
    buttons: { 
    borderRadius: 5, 
    textAlign: "center", 
    textAlignVertical: "center", 
    fontSize: 20 
    }, 
    firstButton: { 
    color: "#FFFFFF", 
    backgroundColor: "#D1E233" 
    }, 
    secondButton: { 
    color: "#FFFFFF", 
    backgroundColor: "#239923" 
    }, 
    thirdButton: { 
    color: "#FFFFFF", 
    backgroundColor: "#958475" 
    }, 
    fourthButton: { 
    color: "#FFFFFF", 
    backgroundColor: "#651278" 
    } 
}); 

ちなみに私は説明無用のもののようなものを発見したことから、私は、リアクトネイティブのユーザーインタフェースに関するすべてのチュートリアルのようなウェブをいただければ幸いです完全な例はありません。

Answer 1

あなたは

Answer 2

divのすべてのボタンをラップし、divの高さを画面の高さ、つまり入力フィールドの高さに合わせることをお勧めします。

​​

Source

あなたはボタンの高さ％を使用することができ、その後これが、その後。ボタンにに住んでコンテナを提供します。したがって、4つのボタンがある場合、それぞれの高さを25％にして、どのスクリーンにも合わせることができます。あなたのコンテナに曲げる代わりのフレックスを割り当てる：