React Native中TextInput组件设置height后仍不显示如何解决？

问题原因 #

• TextInput仅配置了height属性，未设置宽度、边框/背景样式，默认透明状态下无法被肉眼识别
• 内层包裹股票价格的View复用了styles.container的flex:1属性，会抢占外层容器的可用空间，挤压TextInput的布局位置

修复方案 #

1. 完善TextInput的样式，补充宽度、边框、内边距等属性，让输入框可见
2. 单独为内层股价容器设置样式，避免flex:1属性挤压上层输入框的布局空间

修复后完整代码 #

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TextInput, SafeAreaView} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <TextInput style={styles.inp} placeholder="输入股票代码查询" />
      <View style={styles.stockContainer}>
        <Text style={styles.titleText}>$150.32</Text>
        <Text>±$2.10</Text>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 50,
  },
  titleText: {
    fontFamily: "AppleSDGothicNeo-Light",
    fontSize:75
  },
  basicText: {
    fontFamily: "AppleSDGothicNeo-Light",
    fontSize:2
  },
  stockContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  inp: {
    height:40,
    width: '80%',
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    paddingHorizontal: 12,
    marginBottom: 30,
  }
});

内容的提问来源于stack exchange，提问作者DevDog