javascript - 宽度覆盖对齐内容

Question

我有 2 <views>在主<view>我将第二个 View 设置为 90% width ，宽度为 90%屏幕大小，但它不在页面中心，我已经设置了 justifycontents到中心，当我删除 width属性， View 中心，请问我做错了什么

return (
            <View style={BackStyles.main}>
                <View style={BackStyles.container}>
                    <TextInput placeholder="Search for your herbs..."
                               underlineColorAndroid={'transparent'} style={BackStyles.textBox}/>
                </View>
                <View style={BackStyles.herb_box}>
                    <Text>values</Text></View>
            </View>
        );
    }
}
}

const BackStyles = StyleSheet.create({
herb_box: {
    backgroundColor: '#fff',
    borderRadius: 7,
    marginTop: 20,
    // alignItems: 'center',
    justifyContent: 'center',
    margin: 'auto',
    width: '90%',
},
main: {
    flexDirection: 'column',
    flex: 1,
    backgroundColor: '#E2E2E2',
    // justifyContent: 'center',
},
container: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    alignSelf: 'stretch',
    //   flex: 1,
    //  backgroundColor: '#E2E2E2',
    marginTop: 20,
    //  width: '100%'
},
textBox: {
    flex: 1,
    height: 45,
    padding: 4,
    //  textAlignVertical: 'top',
    paddingLeft: 20,
    // marginRight: 5,
    flexGrow: 1,
    //  fontSize: 18,
    color: '#000',
    backgroundColor: '#fff',
    // textAlign: 'center'
 },

Answer 1

您需要将 ma​​rginHorizo​​ntal 设置为 5% 将 herbBox 更新为:

herb_box: {
    backgroundColor: '#fff',
    borderRadius: 7,
    marginTop: 20,
    marginHorizontal:"5%",
    margin: 'auto',
    width: '90%',
},