Question

我有一个从表单更新的状态（键）。更新效果很好，我可以继续向表单添加键，然后将它们呈现出来。但是，每个键都会在新行上呈现。我想我正在正确使用flexDirection，但我很困惑。

renderKeys = () => {
    return (
        <ScrollView style={{marginLeft:'5%', paddingTop: '2%', marginBottom:'5%',
            marginRight: '5%', flexDirection: 'row', borderWidth:1, borderColor:'red'}}>
            {
                this.state.keys.map((key) =>
                    <View
                        style={{
                            borderRadius:10,
                            borderWidth: 1,
                            borderColor: '#fff',
                            backgroundColor: 'white',
                            flexDirection: 'row',
                        }}>
                        <TouchableOpacity onPress={() => this.deleteKey()}>
                            <EvilIcon
                                name='close'
                                type='evilicon'
                                color='#517fa4'
                                size={15}
                            />
                        </TouchableOpacity>
                        <Text style={{color:'black', flex:1}}>{key}</Text>
                    </View>
                )
            }
        </ScrollView>
        )
    }

这是从我的渲染方法中调用的，就像这样：

                    <View style={{borderWidth:1}}>
                        {this.renderKeys()}
                    </View>

Answer 1

如果我正确理解了您的问题，那么您应该发现<View />中使用<ScrollView />样式规则的flexWrap组件可以解决您的问题：

renderKeys = () => {
  return (
      <ScrollView style={{marginLeft:'5%', paddingTop: '2%', marginBottom:'5%',
          marginRight: '5%', borderWidth:1, borderColor:'red'}}>
          <View style={{ flexWrap : 'wrap', flexDirection : 'row' }}>
          {
              this.state.keys.map((key) =>
                  <View
                      style={{
                          borderRadius:10,
                          borderWidth: 1,
                          borderColor: '#fff',
                          backgroundColor: 'white',
                          flexDirection: 'row',
                      }}>
                      <TouchableOpacity onPress={() => this.deleteKey()}>
                          <EvilIcon
                              name='close'
                              type='evilicon'
                              color='#517fa4'
                              size={15}
                          />
                      </TouchableOpacity>
                      <Text style={{color:'black', flex:1}}>{key}</Text>
                  </View>
              )
          }
          </View>
      </ScrollView>
      )
  }

<ScrollView/>组件通常不会像<View />那样响应布局样式，因此通常最好将标签之类的内容嵌套在这样的中间<View />组件中。

如果flexWrap规则与flexDirection : row结合使用，基本上会导致子级在当前行的水平空间用完时在新行中列出。

希望有帮助！

地图功能似乎无法内联渲染组件

1 个答案: