如何在同一級別上創建文本和按鈕

Question

我是新來的react-native和使用彈性框，我通常使用由引導或其他CSS框架提供的網格。

我試圖讓字在中間設置我向下箭頭 右側切換掉模式，但所有我能得到的是：

陣營代碼：

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'; 
}