将 Native App LTR 反应到 RTL 更改，而无需重新启动应用程序

Posted 2023-03-12

【中文标题】将 Native App LTR 反应到 RTL 更改，而无需重新启动应用程序

【英文标题】：React Native App LTR to RTL change without restarting the app

【发布时间】：2020-07-07 05:48:45

【问题描述】：

目前我正在使用I18nManager 更改LTR to RTL，但它只有在重新启动应用程序后才能工作，我的代码如下所示

 import I18nManager from 'react-native';
 import RNRestart from 'react-native-restart';

changeLtrToRtl=()=>
    I18nManager.forceRTL(true);
    RNRestart.Restart();

是否有其他方法可以在不重启应用的情况下实现 LTR 到 RTL 的更改？

【参考方案1】：

您可以使用 Context API 设置应用程序的方向并使用子组件的值。使用该值，您可以有条件地更改组件的方向。

// using I18nManager you can get initial direction of device or you can use async storage or both of them as combined. i really dont care now...
const LanguageDirectionContext = createContext(
  direction: 'ltr'
)

const LanguageDirectionProvider = ( children ) => 
  const [direction, setDirection] = useState('ltr')

  const toggleDirection = () => 
    setDirection(direction === 'ltr' ? 'rtl' : 'ltr')
  

  useEffect(() => 
    // use I18nManager to force direction and use asyncstorage to save the current direction to device.
  , [direction])

  return (
    <LanguageDirectionContext.Provider value=
      direction,
      toggleDirection
    >
    children
    </LanguageDirectionContext.Provider>
  )

创建方向依赖组件并用我们创建的提供者包装它。在这种情况下使用钩子也是一种很好的做法。看看这个。

const useDirection = () => 
  const context = useContext(LanguageDirectionContext)

  if (!context) 
    throw new Error('You forgot the language provider!')
  

  return context

方向相关的文本组件示例。

const MyCustomTextComponent = ( children, style, ...rest ) => 
  const  direction  = useDirection()

  // i cant understand that the direction of text correct right now. maybe you dont need textAlign property.
  return <Text style=[style,  writingDirection: direction, textAlign: direction === 'ltr' ? 'left' : 'right' ] ...rest>children</Text>

如果您有任何其他需要方向的组件，您可以使用 useDirection 挂钩重新创建这些组件。

现在您可以使用 toggleDirection 函数来改变组件的方向。

const MyDirectionChangerButton = () => 
  const  toggleDirection  = useDirection()
  return (
    <Button title="Change direction." onPress=toggleDirection />
  )

这里是完整的例子：https://snack.expo.io/@kubilaysali/frowning-waffles