Javascript 宽度过大对齐内容

我在一个主视图中有2个

我将第二个视图设置为

90%

宽度，宽度是屏幕大小的

90%

，但它不在页面上居中，并且我将

justifycontents

设置为居中，当我删除

width

属性时，视图居中，请问我做错了什么

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

返回(
价值观
);
}
}
}
const BackStyles=StyleSheet.create({
药盒：{
背景颜色：“#fff”，
边界半径：7，
玛金托普：20，
//对齐项目：“居中”，
为内容辩护：“中心”，
页边空白：“自动”，
宽度：“90%”，
},
主要内容：{
flexDirection:'列'，
弹性：1，
背景颜色：“#E2E2”，
//为内容辩护：“中心”，
},
容器：{
flexDirection:'行'，
alignItems:'flex start'，
自我定位：“拉伸”，
//弹性：1，
//背景颜色：“#E2E2”，
玛金托普：20，
//宽度：“100%”
},
文本框：{
弹性：1，
身高：45，
填充：4，
//textAlignVertical:'顶部'，
paddingLeft:20，
//marginRight:5，
flexGrow:1，
//尺码：18，
颜色：“#000”，
背景颜色：“#fff”，
//textAlign:“中心”
},

您需要将边缘水平面设置为5%将框更新为：

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

---

确保视图上的显示设置为“块”。