為什么自動換行按鈕會被react-native中的以下組件阻止？

Question

我有一個視圖，它包裝了許多按鈕，並且仍然通過textinpt不斷創建更多按鈕，在下面是Clode，結果現在，它向底部創建了新行按鈕，但是textinpt組件將空白，為什么？任何人都知道如何解決它？

我的目標是自動拉伸textinpt以使其向下移動，並使其顯示整個botton。

const styles = {
  interests:{
    flexDirection: 'column',
    justifyContent: "space-between",
    paddingRight: 10,
    paddingLeft: 10,
  },
  editSection: {
      //flex: 1,
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  editIcon: {
    flex: 0.05,
    paddingTop: 25
  },
  input: {
    flex: 0.95
  },
  popularTag:{
    flexWrap: 'wrap',
    flexDirection: 'row-reverse',
    justifyContent: 'flex-end',
    paddingTop: 10,
  }
}

return(
  <View style = { styles.interests }>
    <View style = { styles.popularTag }>
      { this.renderShowLists() }
    </View> 
    <View style = { styles.editSection }>
      <View style = { styles.input }>
        <TextInput
          placeholder = "Type your Interests"
          onSubmitEditing = { this.onKeyPress }     
          onChangeText = { (text) => this.setState({ text }) }
          value = { this.state.text }
        /> 
      </View>
      <View style = { styles.editIcon }>
        <Icon name = "border-color" color = "#000000" size = { 20 } />  
      </View>    
    </View>
  </View>  
)

該行實際上是三行，第二行由textinput阻止

Answer 1

您可以嘗試同時為“ popularTag”和“ editSection”設置flex值（也為其父項設置flex值）。

這些2被包含在一個共同的相同的父（“利益”其具有柱的flexDirection，所以設置2為柔性），和它們中的2可以具有用於每個的1撓曲值（使得兩個“popularTag”的高度和“ editSection”將相等，這是基於其父級的50％-“ flexs ：2的興趣”）

  interests:{
    flex: 2,
  },
  editSection:{
    flex: 1,
  }
  popularTag:{
    flex: 1,
  }

如果仍然無法使用，請在此處發布其他圖片或一些錯誤，因為我沒有時間運行所有代碼，謝謝

也請在這里查看我針對另一個類似問題的答案，該問題也與flexbox值有關，僅供參考：

為什么我的本機成分重疊