按钮的宽度在本机反应中没有改变

Posted 2023-05-07

【中文标题】按钮的宽度在本机反应中没有改变

【英文标题】：Width of buttons not changing in react native

【发布时间】：2020-08-28 10:02:57

【问题描述】：

我连续有两个按钮，由 20 的填充隔开，它们占据了按钮标题所需的宽度。它们的宽度不会改变！

按钮代码

<View style=styles.buttonContainer>

  <View style= paddingLeft: 20 >
    <Button title=tick style=styles.button onPress color="tomato" />
  </View>

  <View style= paddingLeft: 20 >
    <Button title="X" style=styles.button onPress color="tomato" />
  </View>

</View>

按钮的 CSS

buttonContainer: 
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end'
,
button: 
    width: 50, // no matter what value I set here, their width doesn't changes
    height: 20,
,

【参考方案1】：

在 React Native 中，您需要用 View 包装它并为父级指定宽度。

所以在你的例子中你应该输入：

<View style= paddingLeft: 20, width: 50, height: 20 >
    <Button title="X" style=styles.button color="tomato" />
</View>

【参考方案2】：

确保用额外的视图包裹按钮。 Button 组件只占用与标题一样多的宽度，无论您在样式中设置多少

另外别忘了加上onPress函数，boolean(true)是无效的prop

export default function App() 
    const tick = 'tick';
    return (
        <View style=styles.buttonContainer>
            <View style= paddingLeft: 20 >
                <Button title=tick style=styles.button onPress color="tomato" />
            </View>

            <View style=styles.buttonStyle>
                <Button title="X" style=styles.button onPress color="tomato" />
            </View>
        </View>
    );


const styles = StyleSheet.create(
    buttonContainer: 
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
    ,
    buttonStyle: 
        paddingLeft: 20,
        width: 200, // this way it works
    ,
    button: 
        height: 20,
    ,
);