Webview顶部的按钮反应原生

Posted 2023-05-07

【中文标题】Webview顶部的按钮反应原生

【英文标题】：Button on top of a Webview react native

【发布时间】：2021-07-09 02:30:26

【问题描述】：

朋友们，我想在 webview 上覆盖一个按钮，以响应本机手动重定向路由。 react native 按钮在 webview 按钮上应该是不可见的 下图显示了网页上的按钮以及 react native 按钮下方。 1

另一个问题是在 webview 中单击输入时键盘无法打开

这是我的代码：

const App = () => 
  const deviceHeight = Dimensions.get('window').height;
  const deviceWidth = Dimensions.get('window').width
  const [url, setUrl] = useState('https://rootroute.com.br/');

  return (
    
    <KeyboardAvoidingView
    behavior= Platform.OS === 'ios' ? 'padding' : undefined 
    style=styles.keyboardAvoidingView
   
  >
    <View style= flex: 1>
      <WebView
        source= uri: url 
        onError=syntheticEvent => 
          const  nativeEvent  = syntheticEvent;
          Alert.alert('WebView error: ', "" + nativeEvent);
        
        onHttpError=syntheticEvent => 
          const  nativeEvent  = syntheticEvent;
          console.warn(
            'WebView received error status code: ',
            nativeEvent.statusCode,
          );
        
        mixedContentMode='always'
        geolocationEnabled=true
        ignoreSslError=true
        javascriptEnabled=true
        domStorageEnabled=true
        scalesPageToFit=true
        startInLoadingState=false
        style= flex: 1, width: deviceWidth, height: deviceHeight, marginTop: 15 
      />
      <View style=styles.container>
        <View style=styles.buttonContainer>
          <Button
            onPress=() => setUrl('https://rootroute.com.br/1')
            title="Home"
          />
        </View>
        <View style=styles.buttonContainer>
        <Button
          onPress=() => setUrl('https://rootroute.com.br/2')
          title="Alerta"
        />
        </View>
        <View style=styles.buttonContainer>
        <Button
          onPress=() => setUrl('https://rootroute.com.br/3')
          title="Explore"
        />
        </View>
        <View style=styles.buttonContainer>
        <Button
          onPress=() => setUrl('https://rootroute.com.br/4')
          title="Carrinho"
        />
        </View>
        <View style=styles.buttonContainer>
        <Button
          onPress=() => setUrl('https://rootroute.com.br/5')
          title="Conta"
        />
        </View>
      </View>

    </View>
    </KeyboardAvoidingView>
  );
;


const styles = StyleSheet.create(
  container: 
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 50
  ,
  buttonContainer: 
    flex: 1,
  ,
  keyboardAvoidingView:  flexGrow: 1, flexShrink: 1 ,
);

export default App; ```

【参考方案1】：

我认为你不需要KeyboardAvoidingView

只需使用WebView 和View

因为KeyboardAvoidingView用来处理TextInput普通键盘上的View