使用map遍历渲染ui时，包含内部的view无法渲染出来

标签：map react native android ios

1.问题描述：使用map遍历渲染ui时，包含内部的view无法渲染出来

解决方案：减少map中嵌套层，能抽出来公用的都抽出来

原因：未知,日后发现时更新

问题代码：

button.length > 0 && button.map((data, index) => {
    if (chIndex === index) {
        return (
            <View style={styles.sliderStyle}>
                <View style={styles.slider}>
                    <Slider
                      key={index}
                    />
                </View>
            </View>
        )
     } })


let styles = StyleSheet.create({
 slider: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center'
  },
  sliderStyle: {
    flexDirection: 'row',
    marginLeft: 15,
    marginRight: 15,
    marginTop: 4,
    marginBottom: 24
  }
})

解决方法代码：

<View style={styles.sliderStyle}>
    <View style={styles.slider}>
        {button.length > 0 && button.map((data, index) => {
            if (chIndex === index) {
                return (
                    <Slider
                        key={index}
                    />
                  )
                }
              })}
    </View>
</View>

let styles = StyleSheet.create({
 slider: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center'
  },
  sliderStyle: {
    flexDirection: 'row',
    marginLeft: 15,
    marginRight: 15,
    marginTop: 4,
    marginBottom: 24
  }
})