Reactjs 组件在另一个组件下渲染

“我的标签”组件由渲染文本和文本输入组件组成，在另一个组件“我的按钮”下渲染，行为异常怪异

如果您查看gif，您还可以看到，从第二行开始的标记也没有被“我的容器”样式包装

我制作了一个gif，这样应该更容易看到：）

const styles=StyleSheet.create({
文本输入：{
弹性：1，
边界半径：8，
paddingLeft:9，
paddingRight:9，
身高：30，
marginRight:15，
},
标记容器：{
flexDirection:'行'，
flexWrap:“wrap”
},
标签：{
背景色：“9AA5B1”，
边界半径：8，
paddingLeft:9，
paddingRight:9，
paddingTop:4，
填充底部：4，
marginRight:10，
marginBottom:4，
flexDirection:“行”，
},
正文：{
颜色：“白色”，
},
容器：{
背景颜色：“#F5F7FA”，
边界半径：8，
paddingLeft:9，
paddingRight:9，
身高：30，
marginRight:15，
flexDirection:“行”，
柔性包装：“包装”，
},
});
renderTags1=（标记、索引、删除标记）=>{
返回(
deleteTag（索引）}
style={style.tags}
key={`${tag}-${index}`}
>
{tag}
);
};
const InputTags=（{tags，value，onChangeText，deletetettag}）=>{
返回(
{tags.map（（标记，索引）=>{
返回此.renderTags1（标记、索引、删除标记）；
})}
onChangeText（{text}）}
value={value}
自动更正={false}
多行={true}
/>
);
};
导出{InputTags}；

对于我的按钮：

import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  view: {
    backgroundColor: '#E12D39',
    width: 280,
    height: 50,
    justifyContent: 'center',
    alignSelf: 'center',
    borderRadius: 10,
    marginTop: 40,
    marginBottom: 40,
  },
  text: {
    alignSelf: 'center',
    fontFamily: 'OpenSans-Semibold',
    fontSize: 22,
    color: 'white',
  },
});

const SearchButton = ({ onPress, text }) => {
  return (
    <TouchableOpacity style={styles.view} onPress={onPress}>
      <Text style={styles.text}>{text}</Text>
    </TouchableOpacity>
  );
};

export { SearchButton };

从“React”导入React；
从“react native”导入{Text，touchablepacity，StyleSheet}；
const styles=StyleSheet.create({
视图：{
背景颜色：“#E12D39”，
宽度：280，
身高：50，
为内容辩护：“中心”，
对齐自我：“中心”，
边界半径：10，
玛金托普：40，
marginBottom:40，
},
正文：{
对齐自我：“中心”，
fontFamily:“OpenSans Semibold”，
尺寸：22，
颜色：'白色'，
},
});
常量搜索按钮=（{onPress，text}）=>{
返回(
{text}
);
};
导出{SearchButton}；

---

按钮的预期行为是按下。尝试删除每个flex属性，但还不能完全理解它

当包装时，高度似乎没有增加，可以通过使容器bg具有不同的颜色来确认

---

看起来您将高度硬编码为30，这可能导致错误

按钮在哪里？我在代码中没有看到它。向我们展示它的样式和HTML。按钮上似乎有某种类型的绝对样式。此外，您还应该让输入标记位于它自己的行（块级元素）上。问题似乎出在您的按钮上。这影响了布局。是绝对的吗？谢谢你的帮助！埃里克实际上解决了这个问题，尽管我不太确定如何解决：佩里克，它实际上解决了所有的问题！我明白了为什么它解决了包装问题，而不是扩展（愚蠢的我：P），而是整个按钮下的渲染问题？你知道这些东西是如何结合在一起的吗？

import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  view: {
    backgroundColor: '#E12D39',
    width: 280,
    height: 50,
    justifyContent: 'center',
    alignSelf: 'center',
    borderRadius: 10,
    marginTop: 40,
    marginBottom: 40,
  },
  text: {
    alignSelf: 'center',
    fontFamily: 'OpenSans-Semibold',
    fontSize: 22,
    color: 'white',
  },
});

const SearchButton = ({ onPress, text }) => {
  return (
    <TouchableOpacity style={styles.view} onPress={onPress}>
      <Text style={styles.text}>{text}</Text>
    </TouchableOpacity>
  );
};

export { SearchButton };