Question

如何将行而不是列映射为默认方式？我尝试在映射的组件上使用flexDirection: 'row'，但运气不佳。我还尝试将ScrollView设置为flexDirection: 'row'，但这无济于事。

理想的结果是

...
@@@@@@@@@@@@@

@@@@@@@@@@@@@

@@@@@@@@@@@@@

@@@@@@@@@@@@@
...

我得到的是：

...

@

@

@

@

@

...

代码：

  <ScrollView style={{width:'80%'}}>
  {
    this.budgetHolder.map((budge) => {
      return (
        <Text style={{color:this.colorHolder, flexDirection: 'row'}}>@</Text>
      )
    })

  }
  </ScrollView>

Answer 1

我认为您需要具有flex样式的View：1围绕它，然后可以使用方向行，并从那里可以并排列出所需的内容。

如果您发现要使用它的80％的屏幕，我会将其分解为80％= 1 /我想要的百分比0.8。这种模式使构建可缩放屏幕非常容易

<View style={styles.container}>
  <View style={styles.row}>
    {
      this.budgetHolder.map((budge) => {
       return (
         <Text style={{color:this.colorHolder, flexDirection: 'row'}}>@</Text>
        )
      })
    }
  </View> 
</View> 

const styles = StyleSheet.create({
  container: {
    flex: 1 
  },
  row: {
    flex: 0.8,
    flexDirection: 'row',
})

连续映射组件

1 个答案: