如何自定义React-Native-lock的默认屏幕？

Question

我喜欢更改图片，标签，按钮，CSS等内容。 可能吗？ 如果是这样，我该怎么办？

Answer 1

不幸的是，这就是他们在React Native包装器库中的全部内容，如果你看一下它们如何处理options对象，那就不是很多与UI相关的选项了：

https://github.com/auth0/react-native-lock/blob/56a705ee4ab395730fb5e6a2beb356fb4853117c/ios/A0RNLock/Core/A0LockReact.m#L71-L151

如果要自定义外观，则必须通过子类化其本机组件使Native模块桥接到React Native，您可以在此处找到它们：https://github.com/auth0/Lock.iOS-OSX/tree/master/Lock

我会查看社区已经完成的其他React Native包，将自定义原生UI元素作为起点来执行此操作，例如：https://github.com/react-native-community/react-native-linear-gradient

此外，这里有Auth0的文档，说明他们如何自定义它：https://auth0.com/docs/libraries/lock-ios/customization

Answer 2

您可以通过将style属性传递给每个组件来更改它， F.e：

import { StyleSheet } from 'react-native';
(...)
render (){
  return (
    <NameOfComponent styles={styles.nameOfStyle}
  );
}
const styles = StyleSheet.create({
  nameOfStyle: {
    fontsize: 10,
  },
});