Невозможно установить фоновое изображение в режиме реагирования? - PullRequest
Новая
       69

Невозможно установить фоновое изображение в режиме реагирования?

2 голосов
/ 25 сентября 2019

Я новичок, чтобы реагировать на нативный, изучая нативные документы, я застрял при использовании ImageBackground.Мой код приведен ниже, помощь будет оценена.Он работал нормально, но когда я начал использовать функцию навигатора, она не работала как обычно. Пожалуйста, предложите оптимальное решение для этой проблемы. 

import React from 'react';
import { StyleSheet, Text, View, Button, ImageBackground } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={{
            uri:
              'https://images.unsplash.com/photo-1524338198850-8a2ff63aaceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=358&q=80',
          }}
          style={styles.backgroundContainer}/>
          <Text style={styles.welcomenote}>WELCOME TO ME</Text>
          <View style={styles.loginbtn}>
            <Button style={styles.loginbtn} title="LOGIN" />
          </View>
          <View style={styles.signupbtn}>
            <Button title="SIGNUP" />
          </View>

      </View>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundContainer: {
    flex: 1,
    width: 300,
    height: 100,
    resizeMode: 'cover',
    justifyContent: 'center',
    alignItems: 'center,',
  },
  loginbtn: {
    padding: 20,
    width: '90%',
    height: 40,
    position: 'absolute',
    left: 20,
    right: 0,
    top: 250,
    bottom: 0,
  },
  signupbtn: {
    padding: 20,
    width: '90%',
    height: 40,
    position: 'absolute',
    left: 20,
    right: 0,
    top: 200,
    bottom: 0,
  },
  welcomenote: {
    position: 'absolute',
    left: 70,
    right: 0,
    top: 200,
    bottom: 0,
    width: '90%',
    height: 40,
    color: 'white',
  },
});

все в порядке, на фоновом изображении не отображается

Ответы [ 3 ]

2 голосов
/ 25 сентября 2019

Попробуйте, 

 import React from 'react';
    import { StyleSheet, Text, View, Button, ImageBackground } from 'react-native';
    import { createAppContainer } from 'react-navigation';
    import { createStackNavigator } from 'react-navigation-stack';

    class HomeScreen extends React.Component {
      render() {
        return (
          <View style={styles.container}>
         <Image source={require('https://images.unsplash.com/photo-1524338198850-8a2ff63aaceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=358&q=80')}  style= 
         {styles.backgroundContainer}/>
              <Text style={styles.welcomenote}>WELCOME TO ME</Text>
              <View style={styles.loginbtn}>
                <Button style={styles.loginbtn} title="LOGIN" />
              </View>
              <View style={styles.signupbtn}>
                <Button title="SIGNUP" />
              </View>

          </View>
        );
      }
    }
    class DetailsScreen extends React.Component {
      render() {
        return (
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen</Text>
          </View>
        );
      }
    }

    const RootStack = createStackNavigator(
      {
        Home: HomeScreen,
        Details: DetailsScreen,
      },
      {
        initialRouteName: 'Home',
      }
    );

    const AppContainer = createAppContainer(RootStack);

    export default class App extends React.Component {
      render() {
        return <AppContainer />;
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
      backgroundContainer: {
        flex: 1,
        width: 300,
        height: 100,
        resizeMode: 'cover',
        justifyContent: 'center',
        alignItems: 'center,',
      },
      loginbtn: {
        padding: 20,
        width: '90%',
        height: 40,
        position: 'absolute',
        left: 20,
        right: 0,
        top: 250,
        bottom: 0,
      },
      signupbtn: {
        padding: 20,
        width: '90%',
        height: 40,
        position: 'absolute',
        left: 20,
        right: 0,
        top: 200,
        bottom: 0,
      },
      welcomenote: {
        position: 'absolute',
        left: 70,
        right: 0,
        top: 200,
        bottom: 0,
        width: '90%',
        height: 40,
        color: 'white',
      },
    });
1 голос
/ 25 сентября 2019

Попробуйте с 

import React from 'react';
import { StyleSheet, Text, View, Button, ImageBackground, Dimensions } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={{
            uri:
              'https://images.unsplash.com/photo-1524338198850-8a2ff63aaceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=358&q=80',
          }}
          style={styles.backgroundContainer}/>
          <Text style={styles.welcomenote}>WELCOME TO ME</Text>
          <View style={styles.loginbtn}>
            <Button style={styles.loginbtn} title="LOGIN" />
          </View>
          <View style={styles.signupbtn}>
            <Button title="SIGNUP" />
          </View>

      </View>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundContainer: {
    width: 300,
    height: Dimensions.get('window').height

  },
  loginbtn: {
    padding: 20,
    width: '90%',
    height: 40,
    position: 'absolute',
    left: 20,
    right: 0,
    top: 250,
    bottom: 0,
  },
  signupbtn: {
    padding: 20,
    width: '90%',
    height: 40,
    position: 'absolute',
    left: 20,
    right: 0,
    top: 200,
    bottom: 0,
  },
  welcomenote: {
    position: 'absolute',
    left: 70,
    right: 0,
    top: 200,
    bottom: 0,
    width: '90%',
    height: 40,
  },
});

В приведенном выше примере, когда вы устанавливаете height из backgroundContainer в 100, это займет всего 100

1 голос
/ 25 сентября 2019

У вас есть некоторые проблемы:

  1. alignItems: 'center,', <- запятая внутри '' </li>
  2. Компонент imageBackground будет родительским для представления
  3. удалить высоту, левые вершины из 'loginbtn', 'signupbtn' и т. д.

попробуйте использовать все flex css (которые будут отзывчивыми);и не используйте фиксированную высоту, или влево, или вправо, или сверху

здесь код работает и проверен: enter image description here

import React from 'react';


import { StyleSheet, Text, View, Button, ImageBackground } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <ImageBackground style={styles.backgroundContainer}
         source={{
           uri:
             'https://images.unsplash.com/photo-1524338198850-8a2ff63aaceb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=358&q=80',
         }}
      >
        <View style={styles.container}>

          <Text style={styles.welcomenote}>WELCOME TO ME</Text>
          <View style={styles.loginbtn}>
            <Button style={styles.loginbtn} title="LOGIN" />
          </View>
          <View style={styles.signupbtn}>
            <Button title="SIGNUP" />
          </View>

        </View>
      </ImageBackground>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  backgroundContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loginbtn: {
    padding: 20,
    width: '90%',
    position: 'absolute',
    top: 250,
    bottom: 0,
  },
  signupbtn: {
    padding: 20,
    width: '90%',
    position: 'absolute',
    top: 200,
    bottom: 0,
  },
  welcomenote: {
    position: 'absolute',
    top: 200,
    bottom: 0,
    width: '90%',
    height: 40,
    color: 'white',
  },
});
...