Question

“我的标记组件”由呈现的文本和文本输入组件组成，在另一个组件（我的按钮）下呈现，并且表现得非常怪异。

如果您查看gif，还可以看到第二行开始的标签也没有被我的容器样式包裹。

我制作了一个gif，它应该更易于查看：) http://www.giphy.com/gifs/JmD2VWAXU3S12LQ0Ya

const styles = StyleSheet.create({
  textInput: {
    flex: 1,

    borderRadius: 8,
    paddingLeft: 9,
    paddingRight: 9,
    height: 30,
    marginRight: 15,
  },
  tagContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  tags: {
    backgroundColor: "#9AA5B1",
    borderRadius: 8,
    paddingLeft: 9,
    paddingRight: 9,
    paddingTop: 4,
    paddingBottom: 4,
    marginRight: 10,
    marginBottom: 4,
    flexDirection: "row",
  },
  text: {
    color: "white",
  },
  container: {
    backgroundColor: '#F5F7FA',
    borderRadius: 8,
    paddingLeft: 9,
    paddingRight: 9,
    height: 30,
    marginRight: 15,
    flexDirection: "row",
    flexWrap: "wrap",
  },
});

renderTags1 = (tag, index, deleteTag) => {
  return (
    <TouchableOpacity
      onPress={index => deleteTag(index)}
      style={styles.tags}
      key={`${tag}-${index}`}
    >
      <Text style={styles.text}>{tag}</Text>
    </TouchableOpacity>
  );
};

const InputTags = ({ tags, value, onChangeText, deleteTag }) => {
  return (
    <View style={styles.container}>
      <View style={styles.tagContainer}>
        {tags.map((tag, index) => {
          return this.renderTags1(tag, index, deleteTag);
        })}
      </View>
      <TextInput
        style={styles.textInput}
        placeholder="Outdoor"
        onChangeText={text => onChangeText({ text })}
        value={value}
        autoCorrect={false}
        multiline={true}
      />
    </View>
  );
};

export { 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 };

预期的行为是Button按下时的行为。试图删除每个flex属性，但还无法弄清楚

Answer 1

好像包裹时高度没有增加，可以通过将容器bg设置为其他颜色来确认

好像您将高度硬编码为30，这很可能会导致错误

组件在另一个组件下渲染

1 个答案: