私はflexboxが初めてであり、react-nativeで全角ボタンを作成できません。私は1日以上これを自分自身で理解しようとしており、インターネット上のすべての関連記事/投稿を無駄に読みました。
画面の幅全体にまたがる2つのTextInput
要素があり、その下にボタンが画面の全幅にまたがっています。 TextInput
要素areは画面の全幅にまたがっていますが、これは実行中のAndroidシミュレーターのデフォルトのようです。
私のコードは次のとおりです。
var MyModule = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.headline}>
<Text>Hello World</Text>
</View>
<View style={styles.inputsContainer}>
<TextInput style={[styles.input]} placeholder="Email" />
<TextInput
secureTextEntry={true}
style={[styles.input]}
placeholder="Password"
/>
<TouchableHighlight
style={styles.fullWidthButton}
onPress={this.buttonPressed}
>
<Text>Submit</Text>
</TouchableHighlight>
</View>
</View>
);
},
buttonPressed: function() {
console.log("button was pressed!");
}
});
var paddingLeft = 15;
var styles = StyleSheet.create({
inputsContainer: {
// Intentionally blank because I've tried everything & I'm clueless
},
fullWidthButton: {
// Intentionally blank because I've tried everything & I'm clueless
},
input: {
paddingLeft: paddingLeft,
height: 40,
borderColor: "black",
backgroundColor: "white"
},
container: {
flex: 1,
backgroundColor: "#f0f0f0",
alignItems: "stretch"
},
headline: {}
});
module.exports = Onboarding;
TouchableHighlight
を画面の全幅に広げるために私が何をする必要があるか知っていますか?
これを実現するには、TouchableHighlightの親要素にflex:1プロパティを設定し、次にflexDirection:rowプロパティをTouchableHighlight要素に割り当てます。
<View style={styles.inputsContainer}>
<TouchableHighlight style={styles.fullWidthButton} onPress={this.buttonPressed}>
<Text style={styles.fullWidthButtonText}>Submit</Text>
</TouchableHighlight>
</View>
inputsContainer: {
flex: 1
},
fullWidthButton: {
backgroundColor: 'blue',
height:70,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
fullWidthButtonText: {
fontSize:24,
color: 'white'
}
完全な動作例を設定しました here 。また、完全なコードは以下のとおりです。
https://rnplay.org/apps/J6fnqg
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
TextInput,
} = React;
var MyModule = React.createClass({
render: function() {
return <View style={styles.container}>
<View style={styles.headline}>
<Text>Hello World</Text>
</View>
<View style={styles.inputsContainer}>
<TextInput style={[styles.input]} placeholder="Email" />
<TextInput secureTextEntry={true} style={[styles.input]} placeholder="Password" />
<TouchableHighlight style={styles.fullWidthButton} onPress={this.buttonPressed}>
<Text style={styles.fullWidthButtonText}>Submit</Text>
</TouchableHighlight>
</View>
</View>
},
buttonPressed: function() {
console.log('button was pressed!');
}
});
var paddingLeft = 15;
var styles = StyleSheet.create({
inputsContainer: {
flex: 1
},
fullWidthButton: {
backgroundColor: 'blue',
height:70,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
fullWidthButtonText: {
fontSize:24,
color: 'white'
},
input: {
paddingLeft: paddingLeft,
height: 40,
borderColor: 'black',
backgroundColor: 'white',
},
container: {
flex: 1,
backgroundColor: '#f0f0f0',
alignItems: 'stretch',
},
headline: {
}
});
AppRegistry.registerComponent('MyModule', () => MyModule);
同じ質問を探してここに来ました。さらに実験を重ねた結果、alignSelf: 'stretch'
を使用するのが最も簡単な方法であることがわかりました。これにより、個々の要素が使用可能な全幅を占有します。
button: {
alignSelf: 'stretch'
}
Naderの答えはもちろん機能しますが、これはFlexboxを使用する正しい方法のようです。
現在、定義済みのコンポーネントボタンがあります。テキストを使用する場合でも、ビューの幅に注意する必要があります。
<View style={[{width:"100%"}]}>
<Button
onPress={this.closeModal}
title="Close"
color="#841584"
style={[{borderRadius: 5,}]}
hardwareAccelerated
/>
</View>
ボタンの幅と高さを設定するのに役立つ以下のソースを使用してみましょう。ここでは、ビューレイアウトでボタンの幅と高さのパラメーターを指定する必要があります。
<View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
<Button
onPress={this.buttonClickListener}
title="Button Three"
color="#90A4AE"
/>
</View>