Question

我有一个包含2个LinearGradient视图的组件，它们都具有绝对位置，另一个具有TextInput。对于此设置，TextInput永远不会在Android中获得焦点。

代码：

class SearchScreen extends Component {

  render() {
    return (
      <View style={{ flex: 1 }}>
        <LinearGradient
          colors={['blue', 'red']}
          style={{
            height: 80,
            width: '100%',
            position: 'absolute',
            zIndex: 10,
            elevation: 10,
            top: 0,
            left: 0,
          }}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
        >
          <TextInput
            style={{
              backgroundColor: 'white',
              height: 50,
              paddingLeft: 15,
              marginTop: 10,
              marginBottom: 10,
              marginRight: 20,
              marginLeft: 20,
              borderWidth: 0,
            }}
            placeholder={'search placeholder'}
            onFocus={() => { console.log('onFocus: '); }}
            onChangeText={(text) => { console.log('enter text: ', text); }}
            onEndEditing={() => { console.log('endEditing: '); }}
          />
        </LinearGradient>
        <LinearGradient
          colors={['red', 'blue']}
          style={{
            height: 150,
            width: '100%',
            position: 'absolute',
            zIndex: 5,
            elevation: 5,
          }}
        >
        </LinearGradient>
      </View >
    );
  }

}

export default SearchScreen;

React Native：0.55.2 react-native-linear-gradient：2.4.0

我发现问题在于带有文本输入的2个绝对定位的LinearGradient视图。如果我删除了一个LinearGradient，TextInput可以正常工作。

我也试过向TextInput提供zIndex，但它不起作用。

感谢。

Answer 1

似乎是zIndex for android中的一个错误，因为它适用于IOS。

您可以通过以下方式使用嵌套线性渐变作为解决方法，以便与呈现的叠加元素没有冲突。

 <LinearGradient
                    colors={['red', 'blue']}
                    style={{
                        height: 150,
                        width: '100%',
                        position: 'absolute',
                        zIndex: 5,
                        elevation: 5,
                    }}
                >
                    <LinearGradient
                        colors={['blue', 'red']}
                        style={{
                            height: 80,
                            width: '100%',
                            position: 'absolute',
                            zIndex: 10,
                            elevation: 10,
                            top: 0,
                            left: 0,
                        }}
                        start={{ x: 0, y: 0 }}
                        end={{ x: 1, y: 0 }}
                    >
                        <TextInput
                            style={{
                                backgroundColor: 'white',
                                height: 50,
                                paddingLeft: 15,
                                marginTop: 10,
                                marginBottom: 10,
                                marginRight: 20,
                                marginLeft: 20,
                                borderWidth: 0,
                            }}
                            placeholder={'search placeholder'}
                            onFocus={() => { console.log('onFocus: '); }}
                            onChangeText={(text) => { console.log('enter text: ', text); }}
                            onEndEditing={() => { console.log('endEditing: '); }}
                        />

                    </LinearGradient>

                </LinearGradient>

绝对定位的LinearGradient中的TextInput不会聚焦

1 个答案: