Question

我试图在各种屏幕尺寸的仿真器上运行代码，设计的布局因设备而异。我需要帮助以使代码mor响应并固定在不同尺寸的屏幕上，例如平板电脑，3“ mobile，6” mobile

-----------或通过以下方式与我们联系-----------我想以更好的方式设置这条线的样式，并且在每台设备上都保持相同的外观

我尝试使用屏幕尺寸，还通过使用变量定义宽度和高度，并以百分比描述值，但是没有用

从'react'导入React，{组件}; 从'react-native'导入{View，TouchableOpacity，Text，StyleSheet，Image，Dimensions}; 从'./BackgroundImage'导入BacgroundImage; 从“ ./Reusable/Button”导入按钮；

const {width：WIDTH} = Dimensions.get（'window'）;

LaunchScreen类扩展了组件{

render（）{ 返回（

        <BacgroundImage>
            <View style={styles.logoContainer}>
                <Image
                    source={require('./images/logo.png')}
                    style={styles.PlaceLogo}
                />
            </View>

            <View style={styles.Buttons}>
                <Buttons style={styles.signupButton}
                onPress={() => navigate('Login')}>
                    <Text style={styles.buttonText}> SIGN UP</Text>
                </Buttons>
                <Buttons style={styles.loginButton}>
                    <Text style={styles.buttonText}> SIGN IN</Text>
                </Buttons>
            </View >
            <View style={styles.sepratorView}>

                <Text style={styles.sepratorText}>--------- or connect with us on ---------</Text>

            </View >
            <View style={styles.socialButtonStyle}>
               <TouchableOpacity
                    style={styles.fbstyle}
                    activeOpacity={0.5}


          >
            <Image
              source={require('./images/facebookicon.png')}
              style={styles.iconstyle}

            />


            <View 
            style={styles.sepratorLine} 
            />
            <Text
                style={styles.socialButtonText}
             >FACEBOOK</Text>
          </TouchableOpacity>


          <TouchableOpacity
            style={styles.googlestyle}
            onPress={this.signIn}
            activeOpacity={0.5}


          >


            <Image
              source={require('./images/google.png')}
              style={styles.iconstyle}
            />

            <View
             style={styles.sepratorLine}
             />
            <Text style={styles.socialButtonText} >GOOGLE</Text>

          </TouchableOpacity>
        </View>



        </BacgroundImage>




    );
};

}

常量样式= StyleSheet.create（{ logo容器：{ 弹性：1

},
PlaceLogo: {
    width: WIDTH - 140,
    margin: 75,
    resizeMode: 'center',
    justifyContent: 'center',
    alignItems: 'center',
},
yosoButtons: {
    width: WIDTH - 80,
    justifyContent:'center',
    marginTop:350            

},
signupButton: {
    height:40,
    paddingTop:7,
    marginBottom: 15,

},
loginButton: {
    height:40,
    paddingTop:7,
    marginBottom: 15
},
buttonText: {

},
sepratorText: {
    textAlign:'center',
    fontSize:20,
    color: '#b6b7ba',        

},
sepratorView: {
    flexDirection: 'row',
    justifyContent:'center',
    alignItems:'center'
},
socialButtonStyle:{
    flex:1,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
    margin:5
},
fbstyle:{
    flex:1,
    flexDirection:'row',
    borderColor:'white',
    alignItems:'center',
    backgroundColor:'#485a96',
    borderWidth:1,
    borderRadius:35,
    height: 40,
    marginLeft:15,
    marginRight:15
},
googlestyle:{
    flex:1,
    flexDirection:'row',
    alignItems:'center',
    backgroundColor:'#dc4e41',
    borderWidth:1,
    borderRadius:35,
    borderColor:'white',
    height: 40,
    marginRight:15
},
iconstyle:{
    resizeMode:'stretch',
    height:25,
    width:25
},
sepratorLine:{
    backgroundColor:'white',
    width:2,
    height: 40
},
socialButtonText:{
    color: '#fff',
    flex:1,
    textAlign: 'center',        
    fontSize: 15,
    fontWeight: "bold"

}

}）;

导出默认的启动屏幕；

我希望布局保持不变，并且徽标和按钮在每台设备上都保持在同一位置

还希望为我在代码中使用的分隔符提供更好的动态解决方案 --------------或通过以下方式与我们联系----------

Answer 1

我有针对此问题的解决方法。我正在使用屏幕的高度和宽度为样式分配值。

import { StyleSheet, Dimensions } from 'react-native';

const { width: WIDTH, height: HEIGHT } = Dimensions.get('window');

SomeText: {   
        fontSize: HEIGHT / 38,
        marginTop: WIDTH / 20,
    }

面临在响应本机样式和实现更好的响应式布局方面遇到的问题

1 个答案: