react-native-linear-gradient在iOS上只能看到红色边框

Question

在react-native iOS上，“react-native-linear-gradient”：“^ 2.0.0”。

使用npm正确安装此软件包然后使用'react-native link'，我看到文本周围有一个红色边框，但没有提供示例的任何渐变。

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',
  },
});

Answer 1

在我的情况下解决了RN 0.41.2：在终端'react-native run-ios'中运行此命令以使用xCode重新编译（通常在'react-native link'命令之后是必需的）

Answer 2

请检查一下 https://alligator.io/react/gradient-border-react-native/ 我已经通过此博客解决了这个问题。

代码示例：

           <LinearGradient
              colors={["#FFA500", "#C5121B"]}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 0 }}
              style={{ borderRadius: 5 }}
            >
              <View style={styles.registerButtonStyle}>
                <Text>Register</Text>
              </View>
            </LinearGradient>


registerButtonStyle: {
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 7,
    paddingTop: 7,
    margin: 1,
    backgroundColor: "white",
    borderRadius: 5

}，