React Native，即使已定义，高度也会自动调整

rjee0c15 于 2022-12-30 发布在 React

关注(0)|答案(1)|浏览(121)

我是新来的这个框架，所以这是代码：

import { StatusBar } from 'expo-status-bar';
                  import React from 'react';
                  import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
                  import { MainLogo } from '../../logos/mainLogo';
                  import { TextInput } from "react-native";

                  export function Home() {
                    return (
                      <SafeAreaView>
                        <View style={styles.firstBackGround}>
                          <MainLogo/>
                          <Text style={{fontSize:25,fontWeight:'bold',color:'rgb(108, 
                        150, 232)',}}>LIBRARY</Text>
                        </View>
                        <TextInput placeholder='Search Song or Artist' style= 
                        {styles.secondBackGround} placeholderTextColor="#6b7eb1" > 
                        </TextInput>
                        <Text style={styles.recommendedText}>Recommended</Text>
                    
                      </SafeAreaView>
                    );
                  }

                  const styles = StyleSheet.create(
                    {

                    container: {  
                      
                    },
                    firstBackGround: {
                      flexDirection:'row',
                      alignItems:'center',
                      flex:0,
                    },
                    secondBackGround:{
                      backgroundColor: '#3f4d7e',
                      width:'83%',
                      marginTop:10,
                      height:'17%',
                      borderRadius:20,
                      flex:0,
                      marginLeft:'auto',
                      marginRight:'auto',
                      paddingLeft: 20,
                    },
                    recommendedText:{
                      fontSize:17,
                      flex:0,
                      flexDirection:'row',
                      fontWeight:'bold',
                      color:'rgb(108, 150, 232)',
                      marginLeft:20,
                      marginTop:100,
                    }
                    
                  });

以下是结果的图像：

我越是增加推荐文本的上边距，它就会自动改变输入字段的高度。我在第一次查看和文本输入之间错误地解决了这个问题，但我不能在文本输入和文本（推荐）之间再次这样做

react-native

来源：https://stackoverflow.com/questions/74943467/react-native-height-is-being-auto-adjusted-even-when-defined

1条答案

按热度按时间

r1zhe5dt1#

高度是增加的，因为你用%给出了它，并且flex：0没有影响。
像这样使用

import React from 'react';
import { Dimensions, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { TextInput } from "react-native";
const { width } = Dimensions.get('window')
export default function SettingsScreen() {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <View style={styles.firstBackGround}>
                <Text style={{ fontSize: 25, fontWeight: 'bold', color: 'rgb(108,150, 232)', }}>LIBRARY</Text>
            </View>
            <TextInput placeholder='Search Song or Artist' style={styles.secondBackGround} placeholderTextColor="#6b7eb1" />

            <Text style={styles.recommendedText}>Recommended</Text>

        </SafeAreaView>
    );
}

const styles = StyleSheet.create(
    {

        container: {

        },
        firstBackGround: {
            flexDirection: 'row',
            alignItems: 'center',
            flex: 0,
        },
        secondBackGround: {
            backgroundColor: '#3f4d7e',
            width: '83%',
            marginTop: 10,
            // height: '17%',
            height: width / 7.5,
            borderRadius: 20,
            // flex: 0,
            marginLeft: 'auto',
            marginRight: 'auto',
            paddingLeft: 20,
        },
        recommendedText: {
            fontSize: 17,
            // flex: 0,
            flexDirection: 'row',
            fontWeight: 'bold',
            color: 'rgb(108, 150, 232)',
            marginLeft: 20,
            marginTop: 200,
            backgroundColor: 'red'
        }

    });

如果您希望设计具有响应性，那么
步骤：1-获取figma或xd屏幕的比例（例如375宽度）
步骤：2-假设视图高度为50，然后除以375/50 = 7.5
step：3-使用height width/7.5（当前窗口的宽度，使用Dimensions API获取）
另一种方法是使用react-native-size-matters库

赞(0）回复(0）举报 2022-12-30

我来回答

React Native，即使已定义，高度也会自动调整

1条答案

相关问题

热门标签

最新问答