React native 如何在react native中将渲染图标放置在TextInput顶部

我有一个密码字段，上面有一个眼睛图标。问题是，带有眼睛图标的TouchableOpacity在文本输入后渲染，因此不可见。我尝试过使用zIndex，但它没有改变任何事情。 有什么建议可以解决这个问题吗

组成部分：

<View style={styles.passwordFieldView}>
 <TextInput
   placeholder="Password"
   secureTextEntry={secureTextEntry}
   style={{ ...styles.textInput, ...styles.passwordInput }}
   value={password}
   onFocus={() => hideErrorAction()}
   onChangeText={(value) => setPassword(value)}
 />
 <TouchableOpacity
   onPress={onEyeClick}
   style={{ ...styles.eyeIcon}}>
   <View>
     <FeatherIcon name="eye" style={{ color: iconColor }} size={20} />
   </View>
 </TouchableOpacity>
</View>;

---

您可能需要为eyeIcon设置左或右属性。我不确定我是否理解您的想法，或者我的问题不够清楚。我的问题是图标在TextInput后面。我不想将其移动到TextInput的右侧。我希望它位于TextInput的顶部，而不是后面，例如，像这样。检查zIndex是否适合你。zIndex是我想到的第一件事，但由于某种原因，它不起作用。

const styles = StyleSheet.create({
    textInput: {
        flex: 1,
        color: colors.lightGray,
        marginBottom: 10,
        height: 50,
        borderWidth: 1,
        borderRadius: 10,
        marginTop: 10,
        borderColor: 'lightgray',
        fontSize: 15,
        paddingLeft: 10,
        backgroundColor: '#fff',
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 1,
        },
        shadowOpacity: 0.1,
        shadowRadius: 0.41,
        elevation: 2,
      },
    eyeIcon: {
        position: 'absolute',
        padding: 15,
        paddingTop: 20,
        alignSelf: "flex-end"
    },
    passwordContainer: {
        margin: 0,
        alignSelf: 'stretch'
    },
    passwordInput: {
        alignSelf: 'stretch',
        marginTop: 20,
    },
    passwordFieldView: {
        alignSelf: 'stretch',
        justifyContent: 'center',
        alignItems: 'center'
    },
});```