在react-native中使用flex-box创建全宽度按钮

40 浏览
0 Comments

在react-native中使用flex-box创建全宽度按钮

我对flexbox不太熟悉，在react-native中无法制作出全宽度的按钮。我已经试了一整天，阅读了互联网上的每一篇相关文章和帖子，但都没有找到解决方法。

我希望有两个元素能够横跨整个屏幕，并且它们下方的按钮也能横跨整个屏幕。这两个元素已经横跨了整个屏幕，但这似乎是在我运行的Android模拟器中的默认设置。

这是我的代码：

var MyModule = React.createClass({

render: function() {

return (

Hello World

secureTextEntry={true}

style={[styles.input]}

placeholder="Password"

/>

style={styles.fullWidthButton}

onPress={this.buttonPressed}

>

Submit

);

},

buttonPressed: function() {

console.log("button was pressed!");

}

});

var paddingLeft = 15;

var styles = StyleSheet.create({

inputsContainer: {

// 故意留空，因为我已经尝试了一切，但还是不知道怎么做

},

fullWidthButton: {

// 故意留空，因为我已经尝试了一切，但还是不知道怎么做

},

input: {

paddingLeft: paddingLeft,

height: 40,

borderColor: "black",

backgroundColor: "white"

},

container: {

flex: 1,

backgroundColor: "#f0f0f0",

alignItems: "stretch"

},

headline: {}

});

module.exports = Onboarding;

有人知道我需要做什么才能让横跨整个屏幕吗？

0

3 答案

0 Comments

全宽按钮（Full width button）在React Native中使用flex-box布局时出现问题，提供的解决方案无法解决。问题的原因是，justifyContent: 'space-between'无法充分利用所有可用空间来放置按钮，而button {alignSelf: 'stretch'}无法在Button组件上起作用。

为了解决这个问题，可以采取以下两种方法：

方法一：将按钮包裹在额外的View组件中，设置flexDirection: "row"。代码如下：

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

以上是解决全宽按钮在React Native中使用flex-box布局时出现问题的两种方法。你可以在此处尝试这两种解决方案：https://snack.expo.io/wAENhUQrp。

0
0 Comments

原因：在React Native中，如果想要实现一个宽度铺满父容器的按钮，通常需要使用flex布局。然而，在本例中，尝试使用flex布局实现全宽按钮时，发现按钮仍然只有文字内容的宽度，没有铺满整个父容器的效果。

解决方法：根据提供的代码，可以通过在TouchableHighlight元素上设置flexDirection: 'row'属性，并在父元素View上设置flex: 1来实现全宽按钮。具体代码如下：


    
        Submit
    

styles = StyleSheet.create({
    inputsContainer: {
        flex: 1
    },
    fullWidthButton: {
        backgroundColor: 'blue',
        height:70,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    fullWidthButtonText: {
        fontSize:24,
        color: 'white'
    }
});

此外，还可以尝试使用Dimensions.get('window').width来获取窗口的宽度，并将其设置为按钮的宽度，以确保按钮铺满整个父容器。具体代码如下：

import { Dimensions } from 'react-native';
var windowWidth = Dimensions.get('window').width;

如果以上方法仍然不能解决问题，还可以尝试在容器的样式中添加alignItems: 'stretch'属性，以确保按钮的宽度能够完全铺满整个容器。

要实现React Native中的全宽按钮，可以通过设置父容器的flex: 1属性和子元素TouchableHighlight的flexDirection: 'row'属性来实现。如果仍然不能实现全宽效果，可以尝试使用Dimensions.get('window').width来获取窗口宽度并设置为按钮的宽度，或者在容器样式中添加alignItems: 'stretch'属性。

0
0 Comments

在React Native中，使用Flexbox布局时，有时候希望按钮占据整个宽度。有一位开发者遇到了这个问题并通过一些实验找到了解决方法。他发现可以使用alignSelf: 'stretch'来实现按钮占据整个宽度的效果。具体来说，他将该属性应用于按钮的样式：button: { alignSelf: 'stretch' }。这样就强制使按钮元素占据可用的全部宽度。

另外，还有另一位开发者提供了另一种解决方法。他指出，在某些情况下，alignSelf: 'stretch'属性在<Button>中不起作用，但在Touchables组件中可以正常工作。为了在<Button>中实现相同的效果，他建议将<Button>包裹在一个具有flex: 1样式的<View>中：<View style={{ flex: 1 }}><Button style={{ alignSelf: 'stretch' }} /> </View>。

要想在React Native中实现全宽度按钮，可以使用alignSelf: 'stretch'属性或将按钮包裹在具有flex: 1样式的<View>中。这两种方法都可以使按钮占据整个可用宽度。

0