如何在 React Native 中的视图之间填充保存答案

【问题标题】：How to fill save between to views in React Native如何在 React Native 中的视图之间填充保存
【发布时间】：2020-03-05 13:56:56
【问题描述】：

我有两个视图，在我的视图中，每个视图中有两个 TextInput 文件，问题是在我的每个 textinput 文件之间有很多空间，如何填补它们之间的空白。以下是我的看法：

    <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={require('../assets/email.png')}/>
          <TextInput style={styles.inputs}
              placeholder="Email"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
        </View>
        <View style={styles.inputContainerx}>
          <Image style={styles.inputIcon} source={require('../assets/email.png')}/>
          <TextInput style={styles.inputs}
              placeholder="Password"
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(password) => this.setState({password})}/>
        </View>

这是样式：

const styles = StyleSheet.create({
    inputs:{
        height:155,
        marginLeft:7,
        borderBottomColor: '#ffff',
    },
      inputContainer: {
        borderBottomColor: '#F5FCFF',
       // backgroundColor: '#FFFFFF',
        borderRadius:50,
        borderBottomWidth: 2,
        width:350,
        height:45,
        marginBottom:180,
        flexDirection: 'row',
        alignItems:'center'
    },
    inputContainerx: {
        borderBottomColor: '#F5FCFF',
       // backgroundColor: '#FFFFFF',
        borderRadius:50,
        borderBottomWidth: 2,
        width:350,
        height:45,
        flexDirection: 'row',
        alignItems:'center',
    },
    inputIcon:{
        width:30,
        height:30,
        marginLeft:15,
        justifyContent: 'center'
      },
});

【问题讨论】：

标签： css react-native react-native-stylesheet

【解决方案1】：

查看以下示例。希望对你有帮助

import * as React from 'react';
import { Button, View, Text, StyleSheet, TextInput, Image } from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          width: '90%',
          alignSelf: 'center',
        }}>
        <View style={styles.inputContainer}>
          <Image
            style={styles.inputIcon}
            source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
          />
          <TextInput
            style={styles.inputs}
            placeholder="Email"
            keyboardType="email-address"
            underlineColorAndroid="transparent"
            onChangeText={email => this.setState({ email })}
          />
        </View>
        <View style={styles.inputContainerx}>
          <Image
            style={styles.inputIcon}
            source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
          />
          <TextInput
            style={styles.inputs}
            placeholder="Password"
            secureTextEntry={true}
            underlineColorAndroid="transparent"
            onChangeText={password => this.setState({ password })}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  inputs: {
    flex: 1,
    height: 35,
    paddingHorizontal: 8,
  },
  inputContainer: {
    borderBottomColor: 'gray',
    borderBottomWidth: 1,
    flexDirection: 'row',
    paddingVertical: 10,
    justifyContent: 'center',
  },
  inputContainerx: {
    borderBottomColor: 'gray',
    borderBottomWidth: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
  },
  inputIcon: {
    width: 30,
    height: 30,
  },
});

export default App;

请随时提出疑问。

【讨论】：