时间戳

首页 > 解决方案 > ReactNative FlatList 没有以阿拉伯语从右到左正确呈现

android - ReactNative FlatList 没有以阿拉伯语从右到左正确呈现

问题描述

我有一个 FlatList 来显示用户列表，当我将设备语言更改为阿拉伯语时，RTL 未正确呈现。箭头应该指向另一个方向。

这是它在移动设备上的外观截图。 在此处输入图像描述

你能建议我是否遗漏任何东西。

这是我的代码。

FlatListScreen.js

    import React, {Component} from 'react';
import {View, Text, FlatList} from 'react-native';
import {List, ListItem, SearchBar} from 'react-native-elements';

class FlatListScreen extends Component{
    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            date: [],
            page: 1,
            seed: 1,
            error: null,
            refreshing: false
        };
    }

    componentDidMount(){
        this.makeRemoteRequest();
    }

    makeRemoteRequest = () => {
        const {page, seed } = this.state;
        const url = 'https://randomuser.me/api/?seed=${seed}&page=${page}&results=20';
        this.setState({loading: true});
        fetch(url)
            .then(res => res.json())
            .then(res => {
                this.setState({
                    data: page === 1 ? res.results : [...this.state.data, ...res.results],
                    error: res.error || null,
                    loading: false,
                    refreshing: false
                });
            })
            .catch(error => {
                this.setState({error, loading: false});
            });
    };

    renderSeparator = () => {
        return (
            <View
                style={{
                    height: 1,
                    width: '86%',
                    backgroundColor: '#CED0CE',
                    marginLeft: '14%',
                }}
            />
        );
    };

    renderFooter = () => {
        if(!this.state.loading) return null;

        return (
            <View
                style={{
                    paddingVertical: 20,
                    borderTopWidth: 1,
                    borderTopColor: "#CED0CE"
                }}
            />
        )
    };

    renderHeader = () => {
        return <SearchBar 
        placeholder="Search.."
        lightTheme
        round />;
    }

    onLearnMore = (item) => {
        this.props.navigation.navigate('Profile', { ...item });
      };

    render (){
        return (
            <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0}}>
                <FlatList
                    data = {this.state.data}
                    renderItem={({item}) => (
                        <ListItem
                            roundAvatar
                            title={`${item.name.first} ${item.name.last}`}
                            subtitle={item.email}
                            avatar={{uri: item.picture.thumbnail}}
                            containerStyle={{ borderBottomWidth: 0 }}
                            onPress={() => this.onLearnMore(item)}
                        />
                    )} 
                    keyExtractor = {item => item.email}
                    ItemSeparatorComponent={this.renderSeparator}
                    ListHeaderComponent={this.renderHeader}
                    ListFooterComponent={this.renderFooter}
                />
            </List>
        )
    }
    }

    export default FlatListScreen;

从 React-native 文档中，我添加了以下 RTL 支持代码 https://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native- apps.html#writing-rtl-ready-components

MainActivity.java

 @Override
    protected String getMainComponentName() {
        I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
        sharedI18nUtilInstance.allowRTL(context, true);
        return "navapp";
    }

AndroidManifest.xml

<application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      android:supportsRtl="true">

标签： androidreact-nativereact-native-flatlist

解决方案

您中显示的箭头FlatList来自ListItem您用于显示数据中每条记录的组件。您需要检查当前的语言/RTL 支持并相应地渲染箭头。

要实现所需的行为，您可以使用组件rightIcon的属性ListItem。

右图标

右侧图标的图标配置（可选），可以是图标库中的名称（如材料）或 React Native 元素，如 Image。除非设置了 hideChevron，否则显示

样本

<ListItem
  roundAvatar
  title={'title'}
  subtitle={'sub title'}
  avatar={{uri: item.picture.thumbnail}}
  containerStyle={{ borderBottomWidth: 0 }}
  onPress={() => this.onLearnMore(item)}
  rightIcon={{name: (I18nManager.isRTL ? 'chevron-left': 'chevron-right')}}
/>

推荐阅读