reactjs - 组件在另一个组件下呈现

问题描述

我的标签组件由渲染的文本和一个文本输入组件组成，在另一个组件下渲染，我的按钮并且表现得非常奇怪。

如果您查看 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 };

预期的行为是按钮下降。试图删除每一个 flex 属性，但还不能完全弄清楚

标签： reactjsreact-native

reactjs - 组件在另一个组件下呈现

问题描述

解决方案

推荐阅读