리액트 네이티브 플렉스 박스 포함 전폭 버튼

리액트 네이티브 플렉스 박스 포함 전폭 버튼

flexbox는 처음이라 반응 원어민으로 전폭 버튼을 만들 수 없습니다.저는 하루 넘게 이 문제를 스스로 해결하려고 노력했지만, 인터넷 상의 모든 관련 기사나 게시물을 읽었지만 소용이 없었습니다.

두 개 주세요TextInput화면 전체 너비에 걸쳐 있는 요소, 그 아래에 화면 전체 너비에 걸쳐 있는 버튼이 있습니다.그TextInput요소는 화면 전체 너비에 걸쳐 있지만 기본적으로는 실행 중인 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화면 전체 너비에 걸쳐서 사용할 수 있습니까?

같은 질문을 하려고 왔어요.더 실험해 본 결과, 가장 간단한 방법은 다음과 같은 방법을 사용하는 것입니다.alignSelf: 'stretch'이렇게 하면 개별 요소가 사용 가능한 전체 폭을 차지하게 됩니다.

 button: {
    alignSelf: 'stretch'
 }

Nader의 답변은 물론 효과가 있지만, Flexbox를 사용하는 것이 올바른 방법인 것 같습니다.

이를 수행하려면 TouchableHighlight의 상위 요소에 flex:1 속성을 설정한 다음 touchableHighlight 요소에 flexDirection:row 속성을 할당합니다.

<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'
  }

여기에 완전한 작업 예를 제시했습니다.또한 풀코드는 다음과 같습니다.

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);

제공된 솔루션은 나에게 효과가 없었다.단추를 추가 항목으로 묶어야 합니다.View컴포넌트:

<View style={{flexDirection: "row"}}>
    <View style = {{flex: 1}}>
        <Button title="Button 1" />
    </View>
    <View style = {{flex: 1}}>
       <Button title="Button 2" />
    </View>
</View>

또는 를 사용합니다.Text와 함께 구성 요소TouchableOpacity:

<View style={{ flexDirection: "row"}}>
    <TouchableOpacity style = {{width: "50%"}}>
        <Text style={{textAlign:"center"}} > Button 1 </Text>
    </TouchableOpacity>
    <TouchableOpacity style = {{width: "50%"}}>
        <Text style={{textAlign:"center"}} > Button 1 </Text>
    </TouchableOpacity>
</View>

두 가지 솔루션을 모두 사용해 보십시오.https://snack.expo.io/wAENhUQrp

• justifyContent: 'space-between'버튼에 사용 가능한 모든 공간을 사용하지 않음
• button {alignSelf: 'stretch'}Button 컴포넌트에서는 동작하지 않습니다.

이제 사전 정의된 구성 요소 버튼이 있습니다.텍스트를 사용하는 경우에도 보기 너비에 주의해야 합니다.

<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>

다음을 사용할 수 있습니다.

alignItems: 'center',
width: '100%',

예:

<View style={styles.container}>
   <Button style={styles.button} />
</View>

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    width: '100%',
  },
  button: {
    alignSelf: 'stretch',
  },
})

언급URL : https://stackoverflow.com/questions/34011508/full-width-button-w-flex-box-in-react-native