如何在同一级别上创建文本和按钮

Question

我是反应原生的新手并使用弹性框，我通常使用由bootstrap或其他css框架提供的Grid。

我正试图在中间加上设置这个词，我的向下箭头 在右侧切换模态，但我能得到的就是：

反应代码：

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { styles } from './styles'
import ViewContainer from 'Reddit/app/components/ViewContainer'
import StatusBarBg from 'Reddit/app/components/StatusBarBg'
import Icon from 'react-native-vector-icons/EvilIcons'

class SettingsIndexScreen extends Component {
  render() {
    return (
      <ViewContainer>
        <StatusBarBg />
        <View style={styles.collapseIconContainer}>
          <Text>Settings</Text>
          <Icon name="arrow-down" size={40} />
        </View>
      </ViewContainer>
    )
  }
}

export default SettingsIndexScreen

的CSS：

import { StyleSheet } from 'react-native'

export const styles = StyleSheet.create({
  collapseIcon: {

  },
  toolbar: {
    flexDirection: 'column'
  },
  toolbarTitle: {
    textAlign: 'center',
    flex: 1,
    marginTop: 20
  },
  toolbarButton: {
    textAlign: 'right',
    marginRight: 8
  }
});

似乎无法弄清楚如何让它们处于同一水平

Answer 1

这应该会给你一些想法 -

  <View style={styles.container}>
    <View style={styles.row}>
      <View style={styles.col1}>
        <Text style={styles.text}>Text1</Text>
      </View>
      <View style={styles.col2}>
        <Text style={styles.text}>Text2</Text>
      </View>
    </View>
  </View>

-

  container: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  col1: {
    flex: 0.6,
  },
  col2: {
    flex: 0.4,
  },
  text: {
    textAlign: 'right',
  },

Answer 2

尝试在其父容器中设置flexDirection: 'row' - collapseIconContainer，就像这样

collapseIconContainer: {
    flexDirection: 'row';
}