React native开发iOS与Android兼容适配常见问题

米开朗积德2026-07-13 10:25

页面样式

1.border引发的样式差异

php 复制代码

 <TouchableOpacity style={styles.saveButton}>
    <Text onPress={handleSave} style={styles.saveButtonText}>
        {strings('saveBtn')}
    </Text>
 </TouchableOpacity>
 const styles = StyleSheet.create({
    saveButtonText: {
        fontSize: 16,
        color: AppColors.white_100,
        paddingHorizontal: 40,
        paddingVertical: 7,
        backgroundColor: AppColors.blue_btn,
        borderRadius: 18,
        overflow: 'hidden',//这是关键代码，没有这个属性的设置在iOS的展示中按钮不会展示圆角
    }
});

2.FlatList引发的样式差异

ini 复制代码

<FlatList
   ....
    removeClippedSubviews={false}//这是关键代码，没有这个属性的设置在iOS的展示中列表需要下拉下才会展示数据
    ...
/>

3.使用弹性布局或者百分比适配小屏手机中的UI展示

事件行为

1.input的处理

javascript 复制代码

import {  KeyboardAvoidingView } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
....
 return Platform.OS === 'ios' ? (
            <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
            //你的input
            </KeyboardAvoidingView>
        ) : (
            <View>
                <KeyboardAwareScrollView keyboardShouldPersistTaps={'handled'}>
                   //你的input
                </KeyboardAwareScrollView>
            </View>
        );

如果不使用以上的包裹使用的Input使用时部分机型会有键盘遮盖input框的问题出现