Question

我想制作一个看起来透明但仍然显示其背后内容的覆盖屏幕。我已将TextInput定位在底部，但无法进行屏幕显示。图片下方是一个更好的主意

我将react-navigation用于header area。

这是我在底部输入TextInput的代码。

const CreateTodoScreen = props => {
    const [title, setTitle] = useState('');
    return (
        <KeyboardAvoidingView style={{ flex: 1 }}
                              behavior="padding"
                              keyboardVerticalOffset={100}>

            <View style={{flex:1,width: '100%', justifyContent: 'flex-end'}}>
                <View>
                <TextInput

                    value={title}
                    onChangeText={text => setTitle(text)}
                    autoFocus={true}
                    placeholder={"e.g. call Alex"}
                    style={{borderBottomWidth: 1, borderBottomColor: 'black'}}
                />

                </View>
            </View>
        </KeyboardAvoidingView>
    )
};

任何帮助都会很棒。

Answer 1

可以在本机中制作透明的屏幕

是的，您可以使用rgba或将背景色设置为transparent。

<View style={{backgroundColor: 'transparent'}}> // Transparent View
    ...
</View>

Answer 2

像这样的事情应该起作用，添加侦听器以在键盘弹起时显示TextInput和灰色覆盖


const CreateTodoScreen = props => {
  const [title, setTitle] = useState('');
  return (
    <KeyboardAvoidingView style={{ height: '100%', width: '100%' }}
      behavior="height"
      keyboardVerticalOffset={20}>


      <View style={{ flex: 1 }}>
        <View style={{ position: 'absolute', left: 0, top: 0, bottom: 0, right: 0, backgroundColor: 'rgba(0, 0, 0, 0.6)', zIndex: 9 }} />
        <View style={{ zIndex: 0 }}>
          <View style={{ height: 40, backgroundColor: 'rgb(124,242,232)' }} />
          <View style={{ height: 40, backgroundColor: 'transparent' }} />
          <View style={{ height: 40, backgroundColor: 'rgb(124,242,232)' }} />
          <View style={{ height: 40, backgroundColor: 'rgb(124,242,232)' }} />
          <View style={{ height: 40, backgroundColor: 'rgb(124,242,232)' }} />
          <View style={{ height: 40, backgroundColor: 'rgb(124,242,232)' }} />
        </View>
      </View>
      <View style={{ height: 48 }}>
        <TextInput
          value={title}
          onChangeText={text => setTitle(text)}
          autoFocus={true}
          placeholder={"e.g. call Alex"}
          style={{ borderBottomWidth: 1, borderBottomColor: 'black' }}
        />
      </View>
    </KeyboardAvoidingView>
  )
};

Answer 3

这正在工作。请记住，屏幕上没有其他任何内容，因此您只能看到灰色的叠加层。另外，删除keyboardVerticalOffset以使其更类似于图像。

      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior="padding">
        <View style={{ flex: 1, width: '100%', justifyContent: 'flex-end' }}>
          <View
            style={{
              alignItems: 'center',
              backgroundColor: 'rgba(151, 151, 151, 0.5)',
              bottom: 0,
              justifyContent: 'flex-end',
              left: 0,
              position: 'absolute',
              right: 0,
              top: 0,
              zIndex: 2,
            }}>
            <TextInput
              value={'hola'}
              onChangeText={() => {}}
              autoFocus={true}
              placeholder={'e.g. call Alex'}
              style={{ borderBottomWidth: 1, borderBottomColor: 'black' }}
            />
          </View>
        </View>
      </KeyboardAvoidingView>

React Native：使用TextInput创建一个覆盖屏幕

3 个答案: