react-native - TextInput 中的单位

Question

用户界面应如下所示

但如果执行以下代码react-native

                <View style={styles.form}>
                    <Text style={{fontSize: 32}}>{`\u20B9`}</Text>
                    <TextInput style={styles.input} autoCapitalize="none" keyboardType = 'numeric' placeholder = {'AMOUNT'}></TextInput>
                </View>

form: {
       marginBottom: 40,
       marginHorizontal: 30,
       marginTop: 64,
       flexDirection: "row"
}

难道我做错了什么 ？

标签： react-nativereact-native-android

Answer 1

根据从评论中收到的澄清更新答案：

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

export default function App() {
  const [textAlign, setTextAlign] = React.useState('center')
  return (
    <View style={styles.form}>
      <Text style={{ fontSize: 32 }}>{`\u20B9`}</Text>
      <TextInput
        style={{ textAlign: textAlign, paddingHorizontal: 5, }}
        autoCapitalize="none"
        onFocus={() => setTextAlign('left')}
        onBlur={() => setTextAlign('center')}
        keyboardType="numeric"
        placeholder="AMOUNT"
        underlineColorAndroid="transparent"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  form: {
    marginBottom: 40,
    marginHorizontal: 30,
    marginTop: 64,
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderColor: '#000000',
    paddingBottom: 2,
    alignItems: 'baseline',
  },
});