连续对齐多个文本框反应原生

Question

我对本机反应非常陌生，目前我正在构建小应用程序只是为了对此有所了解。我在对齐同一行中的两个文本框和一个按钮时遇到了问题。另外，我对 flex 也不太熟悉。但我尝试使用flex-row 作为对齐内容的方向，它成功了，但项目的宽度固定。当我尝试将宽度用作 100% 时，设计被破坏了。这是我尝试过的。我也使用 react-native-paper 作为 ui 库。

    import React, { useState } from 'react'
import { TouchableOpacity, StyleSheet, View, ScrollView, Text } from 'react-native'
import Background from '../components/Background'
import Header from '../components/Header'
import { Appbar, DataTable, Button } from 'react-native-paper'
import FlashMessage, { showMessage, hideMessage } from "react-native-flash-message";
import { theme } from '../core/theme'
import TextInput from '../components/TextInput'

const Dashboard = ({ navigation }) => {

  return (
    <Background>
      <Appbar style={styles.top}>
      <Appbar.Action
        icon="plus"
        onPress={() => navigation.navigate('SaveDataScreen')}
      />
      <Appbar.Action
      style={styles.appbariconfloat}
        icon="power"
        onPress={() => navigation.navigate('LoginScreen')}
      />
    </Appbar>
    <Header style={styles.headermargin}>Welcome back. </Header>
    <DataTable style={styles.datatable}>
      <DataTable.Header>
        <DataTable.Title>Dessert</DataTable.Title>
        <DataTable.Title numeric>Calories</DataTable.Title>
        <DataTable.Title numeric>Fat</DataTable.Title>
      </DataTable.Header>
      <ScrollView>
      <DataTable.Row>
        <DataTable.Cell>Frozen yogurt</DataTable.Cell>
        <DataTable.Cell numeric>159</DataTable.Cell>
        <DataTable.Cell numeric>6.0</DataTable.Cell>
      </DataTable.Row>
      </ScrollView>
    </DataTable>
    <View style={{ flexDirection: 'row' }}>
        <View style={{ width: 100, height: 50, backgroundColor: 'powderblue' }} >  
        <TextInput
          label="Password"
        />
        </View>
        <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} >  
        <TextInput
          label="Password"
        />
        </View>
        <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} >  
        <Button mode="contained">
          Login
        </Button>
        </View>
      </View>
    <FlashMessage position="top" />
    </Background>
  )
}

export default Dashboard

const styles = StyleSheet.create({
  top: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
  },
  headermargin: {
    marginTop: 40,
    fontSize: 21,
    color: theme.colors.primary,
    fontWeight: 'bold',
    paddingVertical: 12,
  },
  card: {
    width: '100%',
    marginTop: 15,
    backgroundColor:'rgba(56, 172, 236, 1)',
    borderWidth:0,
  },
  customView: {
    width: '100%',
    marginTop: 37
  },
  appbariconfloat:{
    marginLeft: "auto",
  },
  datatable:{
    backgroundColor:'white'
  },
  
})

我需要这样的设计

这是我尝试过的输出

Answer 1

试试这个：

<View style={{flexDirection: 'row'}}>
    <View style={{flex: 1, marginRight: 10, height: 50, backgroundColor: 'powderblue'}}>
        <TextInput label="Password" />
    </View>
    <View style={{flex: 1, marginRight: 10, height: 50, backgroundColor: 'powderblue'}}>
        <TextInput label="Password" />
    </View>
    <View style={{flex: 1, height: 50, backgroundColor: 'powderblue'}}>
        <Button mode="contained">Login</Button>
    </View>
</View>;

Answer 2

请试试这个。那是一个CSS问题。为按钮视图留出一些边距。

      <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
        <View style={{ margin: 5, width: 100, height: 50, backgroundColor: 'powderblue' }} >  
        <TextInput
          label="Password"
        />
        </View>
        <View style={{ margin: 5, width: 50, height: 50, backgroundColor: 'powderblue' }} >  
        <TextInput
          label="Password"
        />
        </View>
        <View style={{ margin: 5, width: 50, height: 50, backgroundColor: 'powderblue' }} >  
        <Button mode="contained">
          Login
        </Button>
        </View>
      </View>