@2hats/react-native-linear-gradient 中文文档教程

Question

react-native-linear-gradient

用于 react-native 的 组件，如中所示 react-native-login。

2.0 版支持 react-native >= 0.40.0

Add it to your project

您可以尝试自动链接项目：

$ react-native link

或如下所述手动链接：

iOS

• Run npm install react-native-linear-gradient --save

然后：

Cocoapods

将以下行添加到您的 Podfile :

pod 'React', :path => '../node_modules/react-native'
pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'

或:

Manually

1. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" Look under node_modules/react-native-linear-gradient and add BVLinearGradient.xcodeproj. (Screenshot).
2. Add libBVLinearGradient.a to Build Phases -> Link Binary With Libraries (Screenshot).
3. Click on BVLinearGradient.xcodeproj in Libraries and go the Build Settings tab. Double click the text to the right of Header Search Paths and verify that it has $(SRCROOT)/../react-native/React - if it isn't, then add it. This is so XCode is able to find the headers that the BVLinearGradient source files are referring to by pointing to the header files installed within the react-native node_modules directory. (Screenshot).

然后：

• Whenever you want to use it within React code now you can: import LinearGradient from 'react-native-linear-gradient';

如果您遇到问题，可以将您的 package.json 指向 github 以查看问题是否已解决。 只需更改依赖项

"react-native-linear-gradient": "react-native-community/react-native-linear-gradient",

即可从github 而不是 npm，然后 npm install

例如，podspec 文件在 npm 中不包含正确的数据（作者属性等），而在 github 存储库中包含。

Android

1. in android/settings.gradle

...
include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')

2. in android/app/build.gradle add:

dependencies {
    ...
    compile project(':react-native-linear-gradient')
}

3. and finally, in android/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java for react-native < 0.29, or android/src/main/java/com/{YOUR_APP_NAME}/MainApplication.java for react-native >= 0.29 add:

//...
import com.BV.LinearGradient.LinearGradientPackage; // <--- This!
//...
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new LinearGradientPackage() // <---- and This!
  );
}

Examples

Simple

这样的内容：

以下代码将产生类似 code result">

import LinearGradient from 'react-native-linear-gradient';

// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook
  </Text>
</LinearGradient>

// Later on in your styles..
var styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});

Additional props

除了常规的 View 道具外，您还可以提供额外的道具来自定义您的渐变外观：

colors

至少包含两个表示渐变颜色的颜色值的数组。 示例：['red', 'blue'] 设置从红色到蓝色的渐变。

start

以下类型的可选对象：{ x: number, y: number }。 坐标声明渐变开始的位置，作为渐变整体大小的一部分，从左上角开始。 示例：{ x: 0.1, y: 0.1 } 表示渐变将从顶部开始 10%，从左侧开始 10%。

end

与开始相同，但用于渐变的结束。

locations

一个可选的数字数组，定义每个渐变色标的位置，映射到 colors 属性中具有相同索引的颜色。 示例：[0.1, 0.75, 1] 表示第一种颜色占 0% - 10%，第二种颜色占 10% - 75%，最后第三种颜色占 75% - 100%。

<LinearGradient
  start={{x: 0.0, y: 0.25}} end={{x: 0.5, y: 1.0}}
  locations={[0,0.5,0.6]}
  colors={['#4c669f', '#3b5998', '#192f6a']}
  style={styles.linearGradient}>
  <Text style={styles.buttonText}>
    Sign in with Facebook
  </Text>
</LinearGradient>

Updating the values for fun

查看 Examples/AnimatedGradient（git clone 这个项目，cd 进去，npm install，在 XCode 中打开并运行）看看这是如何完成的：

这个 gif 是使用 licecap - 一个很棒的免费 OSS

An example app

您可以在 brentvatne/react-native-login。

License

执照是麻省理工学院