如何在 React Native 中进行响应式设计

Question

Code

App.js

<View style={style.headr}>
    <TouchableOpacity
      onPress={() => navigation.goBack()}
    >
      <Image style={style.backimg} source={require("../img/back.png")} />
    </TouchableOpacity>
    <Text style={{ fontSize: 23, marginLeft: deviceWidth/5, color: '#fff' ,}}>Notification</Text>
</View>

css

headr: {
    width: "100%",
    height: 100,
    backgroundColor: '#3C79F5',
    elevation: 2,
    alignItems: 'center',
    flexDirection: 'row',
    borderBottomRightRadius:50
},

here is img

I want Img 1 output but when i try to is look like Img2 output

how to do full responsiv output like img1

Answer 1

For responsive height, width, margin, padding.. you can use this npm

https://www.npmjs.com/package/react-native-responsive-screen

For responsive font size, you can go with this npm

https://www.npmjs.com/package/react-native-responsive-fontsize

Regarding design issue you are facing, we can only inform after you put all code that you did

As you added code for style of headr then it looks like borderBottomLeftRadius pending to curv from bottom left side same as right one to match expect result