javascript - 如何使用 react-native-localize 本地化基于数组的文本

Question

我正在使用 react-native-localize 在我的项目中设置本地化，使用普通字符串我只使用像这样的普通 i18n 助手，简单明了。

{I18n.t("filter")}

但是对于基于数组的数据，我该怎么做，例如我有一个 Carousel，它从这样的数据数组中获取它的项目：

const [ bookSliders, setBookSliders] = useState([
        { image:'/img/misc/sin-favoritos.jpg', id:2,title:'¡Salva una mesa vacia!',body:'Reservando una mesa con descuento durante las horas vacias ayudas a los restaurantes a conseguir la máxima ocupación en estos tiempos complicados.' },
        { image:'/img/misc/sin-pack.jpg', id:1, title:'Reserva desde la app',body:'Realiza tu pedido y paga facilmente desde la app , recuerda presentarte en el establecimiento entre las horas acordada.' },

<Carousel  firstItem={0} onSnapToItem={slideIndex => { console.log(slideIndex); setActiveSlide(slideIndex) }} enableSnap data={bookSliders}
            renderItem={({ item }) => 
            <View style={{ backgroundColor:'white', width:370, borderWidth:0,height:340, flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
            
            <Image style={{ width:140,height:140,marginBottom:10}}  resizeMode="cover" source={{uri: env.BASE_URL+item.image }}/>
            {/*<Image style={{ width:140, height:140,marginBottom:10 }} resizeMode="contain" source={require('@assets/images/sandia.png')}/>*/}
            <Text style={{ fontSize:18, color:'black',marginBottom:10,fontFamily:'AirbnbCerealMedium',textAlign:'center' }}>{ item.title }</Text>
            <Text style={{ width:'85%',fontSize:16, color:'rgb(125,125,125)',marginBottom:5 ,textAlign:'center',fontFamily:'AirbnbCerealBook'}}>{ item.body }</Text>
                
            
            </View>}
            sliderHeight={125} itemHeight={340} itemWidth={370} vertical={false} sliderWidth={340}/>

请注意我如何使用 {item.title} 和 {item.body} 来显示相应的活动幻灯片，但是如何使用 i18n 翻译助手显示正确的字符串？

我的本地化 json 文件如下所示：

export default {
    hello: "Hola",
    filter:"Filtros",
    map:"Mapa",
    sort:"Ordenar",
    list:"Lista",
  };

标签： javascriptreactjsreact-native