Блог

Главная - Вопросы по программированию - Как изменить источник изображения в соответствии с ситуацией

Как изменить источник изображения в соответствии с ситуацией

#react-native

#react-native

Вопрос:

Когда рендеринг компонента в первый раз this.props.navigation.getParam('Image') становится неопределенным, so <Image> принимает this.state.Image , а когда this.props.navigation.getParam('Image') не становится неопределенным, я принимаю это как изображение. Но когда я долго нажимаю на кнопку, я хочу отобразить значение по умолчанию как require('../Images/add2.png') . Я не мог этого сделать. Любая помощь

 state= {
  Images : require('../Images/add2.png'),
}

    render() {

    return (
         <View>
    <TouchableOpacity   onPressIn={() => this.setState({ buttonPress: 'short' })} 
                        onLongPress={() => this.setState({ buttonPress: 'long' })} 
                        onPressOut={() => {
                            const { buttonPress } = this.state; 
                            if (buttonPress === 'short')
                            {

                            }
                            else if (buttonPress === 'long')
                            {
                                this.setState({ ButtonImage: require('../Images/add2.png') });
                            }
                            this.setState({ buttonPress: 'none' });
                        }}>
       --------->    <Image source={ this.props.navigation.getParam('Image') !== undefined ? { uri: this.props.navigation.getParam('Image') } : this.state.Images } style={{ height: 30, width: 30 }} />

    </TouchableOpacity>
     </View>
)
}

Ответ №1:

у вас может быть 2 <Image> , один для ‘require’, один для uri.

 return (
     <View>
<TouchableOpacity   
   onPressIn={() => this.setState({ buttonPress: 'short' })} 
   onLongPress={() => this.setState({ buttonPress: 'long' })} 
   onPressOut={() => {
     const { buttonPress } = this.state; 
     if (buttonPress === 'short'){


     }
     else if (buttonPress === 'long'){
        this.setState({ ButtonImage: require('../Images/add2.png') });
     }
     this.setState({ buttonPress: 'none' });
   }}>
   {this.state.localImage?<Image source={ require('../Images/add2.png') } style={{ height: 30, width: 30 }} />
   :
    <Image source={ uri:this.state.image } style={{ height: 30, width: 30 }} />
    }

</TouchableOpacity>
 </View>

)

Сохранить вы хотите отобразить локальный файл (‘../Images /add2.png’), для которого this.state.localImage установлено значение true, и сохранить URL-адреса в this.state.image

Комментарии:

1. this.props.navigation.getParam(‘Изображение’) не определено. Когда я отправляю prop этому компоненту, определяется this.props.navigation.getParam(‘Изображение’). если this.props.navigation.getParam(‘Изображение’) определено, я хочу установить мое изображение с помощью этого. Но когда долго нажимается кнопка, я хочу, чтобы она менялась как изображение по умолчанию. Проблема начинается здесь, this.props.navigation.getParam(‘Image’) все еще определен, поэтому он принимает это как изображение.

2. да, при длительном нажатии кнопки устанавливается this.state.localImage значение true! это приведет к исчезновению другого изображения и отображению изображения по умолчанию